Začněme.

Značky HTML5

Nejprve musíme vytvořit html dokument s následujícím značením:

 
 
 
 
Apple iPhone 4 - 16 GB
 
Nejúžasnější iPhone.
 
 
 
  
 
 
Rychlejší dvoujádrový čip A5. Fotoaparát s rozlišením 8 MP s zcela novou optikou také natáčí 1080p HD video. A představení Siri. Je to zatím nejúžasnější iPhone.
 
 
Vlastnosti produktu
 
 
8 megapixelový fotoaparát s plným 1080p videozáznamem
 
Siri hlasitě asistoval
 
iCloud
 
Letecký tisk
 
Retina displej
 
Foto a video geotagging
 
 
 Kup nyní 
 
 

Používáme několik nových značek z HTML5 spec záhlaví, hgroup, postava, sekce, a jeden, o kterém jsme dříve hovořili; podrobnosti a souhrn štítek.

Nebudeme se však do těchto značek kopat, ne proto, že bychom nebyli ochotni, ale spíše se jedná o základní témata, která můžete snadno najít jinde. Takže, pokud jste opravdu nový HTML5, doporučuji vám přečíst následující odkazy těchto značek; vysvětlili je komplexně:

• Promluvme si o sémantice
• Element HTML5 záhlaví
• Hgroup Element
• HTML5 Tag Reference

Nyní se podívejme na první vzhled naší stránky.

No, vypadá to rozumně bez jakýchkoliv stylů. Na samém vrcholu je záhlaví a pak přichází sekce pro obrázek, popis a nakonec tlačítko 'Koupit'. Pojďme si tuto stránku prohlédnout.

Styly

Začneme normalizací všech výchozích stylů pomocí této šablony stylů a přidáme pozadí přechodu html štítek.

 html výška: 100%; pozadí: # f3f3f3; pozadí: -moz-lineární gradient (horní, # f3f3f3 0%, #ffffff 50%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # f3f3f3), barevný doraz (50%, # ffffff)); pozadí: -webkit-lineární gradient (horní, # f3f3f3 0%, # ffffff 50%); pozadí: -o-lineární gradient (horní, # f3f3f3 0%, # ffffff 50%); pozadí: -ms-lineární gradient (horní, # f3f3f3 0%, # ffffff 50%); pozadí: lineární gradient (horní, # f3f3f3 0%, # ffffff 50%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Nezapomeňte, že všechny naše produktové prvky jsou zabaleny v rámci div s třídou výrobků. Tady bychom chtěli soustředit obal a nastavit šířku, která má být kolem 650px.

 .wrapper width: 650px; okraj: auto; polstrování: 25px 0px; 

Sekce záhlaví

V sekci záhlaví máme dva záhlaví h1 a h4, Tak pojďme styl těchto prvků.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; font-weight: normální; marže: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; barva: #aaa; 

A pak přidejte trochu prostoru na dně záhlaví s marží.

 header margin-bottom: 20px; 

Pokud se podíváte na pravou stranu záhlaví, bude na této straně mnoho mezer.

Tak proč tam také neuvádíme logo Apple.

 header margin-bottom: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') pravé opakování vpravo; 

Obrázek produktu

Dále plovoucí obraz doleva a nastavte maximální šířku obrazu 350px.

 obrázek float: left;  obrázek img max-width: 350px; 

Vzhledem k tomu, že obrázek byl posunut doleva, pak budeme plavat popisovou část vpravo a nastavit šířku na 300px.

 sekce rodina fontů: Tahoma, Arial, sans-serif; výška řádku: 150%; float: right; šířka: 300px; barva: # 333; 

Podívejme se nyní na výsledek.

Začíná to vypadat dobře, ale značka podrobností ještě nefunguje (s výjimkou Chrome), takže nechte styl tlačítka dále.

Tlačítko

Pro styly tlačítek napodobíme ten z obchodu Apple.com Store. A zde je veškerá syntaxe, kterou musíte vložit do svého stylesheetu pro tlačítko.

 tlačítko pozadí: # 36a9ea; pozadí: -moz-lineární gradient (horní, # 36a9ea 0%, # 127fd2 100%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # 36a9ea), barevný stop (100%, # 127fd2)); pozadí: -webkit-lineární gradient (horní, # 36a9ea 0%, # 127fd2 100%); pozadí: -o-lineární gradient (horní, # 36a9ea 0%, # 127fd2 100%); pozadí: -ms-lineární gradient (horní, # 36a9ea 0%, # 127fd2 100%); pozadí: lineární gradient (horní, # 36a9ea 0%, # 127fd2 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); ohraničení: 1px pevné # 00599d; barva: #ff; polstrování: 8px 20px; -webk-border-radius: 3px; hraniční rádius: 3px; -webk-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, 1), vloženo 0px 1px 0px 0px rgba (250, 250, 250, 3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, 1), vloženo 0px 1px 0px 0px rgba (250, 250, 250, 3); textový stín: 0px 1px 1px # 156cc4; filtr: dropshadow (barva = # 156cc4, offx = 0, offy = 1); velikost písma: 10pt;  tlačítko: hover background: # 2f90d5; pozadí: -moz-lineární gradient (horní, # 2f90d5 0%, # 0351b7 100%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # 2f90d5), barevné zastavení (100%, # 0351b7)); pozadí: -webk-lineární gradient (horní, # 2f90d5 0%, # 0351b7 100%); pozadí: -o-lineární gradient (horní, # 2f90d5 0%, # 0351b7 100%); pozadí: -ms-lineární gradient (horní, # 2f90d5 0%, # 0351b7 100%); pozadí: lineární gradient (horní, # 2f90d5 0%, # 0351b7 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  tlačítko: aktivní pozadí: # 127fd2; -webk-box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Tlačítko by mělo vypadat lépe.

Problém v aplikaci Internet Explorer

Jako obvykle IE (Internet Explorer) vždy způsobuje nějaké potíže; pokud toto otevřete v libovolném IE nižším než 9, stránka zůstane bez stylu.

Důvodem je, že aplikace Internet Explorer nerozpozná nové prvky (sekce, záhlaví, atd.), takže styly, které jsme zadali, se nezdaří aplikovat. V dalším kroku tedy budeme pracovat na řešení tohoto problému.

Testování podpory prohlížeče

V našem předchozím příspěvku jsme se zabývali podporou prohlížeče pro prvek detailu pomocí tohoto polyfill; tak, aby mohl fungovat v nepodporovaných prohlížečích. Tentokrát se však pokusíme o různé způsoby, jak to s Modernizrem dělat.

Z oficiálních stránek, "Modernizr je open-source JavaScript knihovna, která vám pomůže vybudovat další generaci HTML5 a CSS3-webové stránky". Technicky, Modernizr bude testovat podporu prohlížeče pro některé nové prvky a funkce. Není-li podpora poskytnuta, musíme poskytnout nouzovou informaci, zda se jedná o poskytování různých stylů nebo poskytování polyfills. V tomto případě použijeme Modernizr, abychom nám pomohli otestovat detaily a souhrnný prvek.

1. Přejděte na stránku Modernizr a přejděte na stránku ke stažení.

2. Na stránce pro stahování poskytuje Modernizr několik možností konfigurace knihovny, takže stačí vybrat určité funkce, které potřebujete pro vaše webové stránky. V tomto případě potřebujeme:

   • HTML5Shiv 3.4
   • Přidat třídy CSS, Tato funkce automaticky vloží třídy do tagu html.
   • Modernizr.load,
   • přejděte do pole Doplňky komunity a vyberte možnost detaily elem,
   • V části Rozšiřitelnost vyberte možnost Modernizr.addTest.
3. Generujte a stáhněte soubor.
4. Připojte jej k html a znovu načtěte stránku v aplikaci Internet Explorer. Stránka by měla být nyní upravena, protože aplikace Internet Explorer nyní rozpoznává značky.

A pokud si prohlížíte zdroj nebo zkontrolujete prvek, zjistíte, že třída no-details byla vložena do tagu html; označující, že prohlížeč, ve kterém si prohlížíme stránku; v současné době nepodporuje prvek podrobností. @@@@ [Tuto vetu nechápu. ]

Můžeme pak vytvořit nouzové použití této třídy jako hák, který budeme dělat v dalším kroku.

Úpadek

V tomto kroku poskytneme podobné podrobnosti funkce pro ostatní prohlížeče (kromě Chrome). V předchozím příspěvku byl tento krok automaticky proveden pomocí tohoto skriptu, ale tentokrát ho vytvoříme sami.

Poznámka: Prostě si trochu přečtěte z našeho předchozího příspěvku; prvek podrobností je aktuálně podporován pouze v prohlížeči Chrome.

Začněme tedy nejprve pracovat na CSS.

Na souhrnné značce změníme jeho režim kurzoru na ukazatel, takže uživatel si všimne, že je klikací.

 summary cursor: ukazatel; velikost písma: 12pt; obrys: 0; 

Chcete-li zadat více mezer v horní a dolní části prvku podrobností s okrajem.

 podrobnosti margin: 20px 0px; 

Ve výchozím nastavení bude mít souhrnná značka šipku. Rádi bychom ji však nahradili ikonou plus-mínus.

Poznámka: Předtím, než jsem pokračoval, stáhnul jsem si z této kolekce ikony Fugue, stáhnul a sprite je do jednoho souboru.

Přidejme pseudo-element a připojíme ikonu jako pozadí. Všimněte si, že v tomto okamžiku je pozice pozadí nahoře, která zobrazí ikonu plus.

 podrobnosti> shrnutí: před width: 16px; výška: 16px; displej: inline-block; content: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') středová část bez opakování; 5px; pozice: relativní; horní: 2px;

Když je prvek detailu otevřen, pozice pozadí se přesune na dno, které zobrazí ikonu minus.

 podrobnosti [otevřít]> shrnutí: before, details.open> summary: before background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) středové dno bez opakování; 

[otevřeno] znak je volič. V tomto případě zvolí v podpůrném prohlížeči atribut open data.

Nakonec bychom měli skrýt šipku, která je standardně zobrazena v prohlížeči Chrome.

 podrobnosti> summary :: - webkit-details-marker display: none; 

Poté se na chvíli podíváme na výsledek v prohlížeči.

Výchozí šipka nyní byla nahrazena naší ikonou a pokud ji vidíte v prohlížeči Chrome, budete mít na ni již přepínací efekt. ikona se odpovídajícím způsobem změní. Ale v jiných prohlížečích se nic nestane. Takže v dalším kroku se pokusíme replikovat efekt pomocí jQuery.

Přepínač efektu jQuery

Než začneme s částí jQuery, rád bych poděkoval Ianovi Devlinovi za inspiraci, níže uvedený skript je vlastně mírnou úpravou jeho.

V pořádku, vytvořme proměnnou pro uložení souhrnné značky.

 var summary = $ ('shrnutí podrobností'); 

Pak zabalíme všechny prvky sourozence souhrnu s div.

summary.siblings (). wrapAll ('
„);

A skrýt, že div, když prvek detail nemá otevřenou třídu.

$ ('podrobnosti: not (.open) summary') siblings ('div') skrýt ();

Když kliknete na shrnutí, chceme, aby byl skrytý div zobrazen a naopak, když je div původně otevřen, bylo by skryto.

 sum.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Abychom se ujistili, že tyto funkce budou prováděny pouze v nepodporovaných prohlížečích, zabalíme je do tohoto podmíněného příkazu.

 if ($ ('html'). hasClass ('no-details')) // kód jde sem

Níže uvádíme kód, který máme:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('souhrn údajů'); summary.siblings (). wrapAll ('
„); $ ('podrobnosti: not (.open) summary') siblings ('div') skrýt (); sum.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Nyní to vyzkoušejte v prohlížeči; efekt přepínání by nyní měl fungovat na všech prohlížečích, které jsem osobně zkontroloval (až do aplikace Internet Explorer 7).

• Demo
• Stáhněte si zdroj

Tipy: Alternativně můžete změnit .přepnout () s .slideToggle () vytvořit efekt posuvného snímku. Také pokud chcete, aby byl detail zpočátku otevřen, můžete v elementu podrobností přidat třídu otevřenou.

Závěr

Byli jsme ve všech krocích vytvoření jediné produktové stránky pomocí HTML5, ladění nepodporovaných prohlížečů a replikace přepínacího efektu pro element detailu na vlastní pěst, takže se z toho můžete hodně naučit.

Jsem si však vědom (a), že jsem v tomto příspěvku podrobně nevysvětlil vše, takže pokud chcete něco zrušit, můžete otázku odeslat do pole pro komentář níže.