HTML5 Kako uporabljati oznake

in

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

Med več novimi oznakami, ki so na voljo v HTML5, so specifikacije (na primer: številka, figcaption, in na stran), podrobnosti in povzetek po mojem mnenju so najbolj uporabne. S temi novimi oznakami lahko skrijete nekaj dolge vsebine in prikažete samo povzetek.

Dejansko pogosto vidimo ta učinek, vendar je večina še vedno zgrajena na JavaScriptu ali njegovem bratu: jQuery, ki ga večina ljudi ne razume. Z novimi elementi - podrobnosti in povzetek - stvari bodo lažje.

Torej, poglejmo, kako oznake delujejo v realnem primeru.

V tej predstavitvi bomo povzeli opis izdelka. Najprej ustvarimo oznako »podrobnosti« in nato vstavimo vso vsebino skupaj z oznako »povzetek« v njej, kot v spodnjem primeru:

 
 
Specifikacije za MacBook Pro
 
 
13,3-palčni sijajni širokozaslonski zaslon z LED osvetlitvijo z neprekinjenim steklom od roba do roba (ločljivost 1280 x 800 slikovnih pik).
 
2.4 GHz Intel Core i5 dvojedrni procesor s 3 MB skupnega predpomnilnika L3 za odlično večopravilnost.
 
Intel HD Graphics 3000 z 384 MB DDR3 SDRAM-a, ki si ga delite z glavnim pomnilnikom.
 
500 GB Serial ATA trdi disk (5400 vrt / min)
 
4 GB nameščenega pomnilnika RAM (DDR3 1333 MHz; podpira do 8 GB)
 
 
 

V tem primeru sem dodal podrobnosti o specifikacijah za MacBook Pro in zdaj poglejmo, kako brskalnik te oznake označi.

Dodal sem tudi naslov in več opisov izdelka nad podrobnostmi, da bo zgornji demo za vas bolj razumen. Torej, kaj mislite? Preprosto je, prav?

Podpira brskalnik

Preden se odločite za to oznako za celotno spletno mesto, morate opozoriti, da so podatki in oznaka povzetka trenutno podprti samo za Chrome 12 in novejše.

Tudi najnovejši Firefox jih še ne podpira.

Če želite uporabiti to oznako, morate vključiti pomožno funkcijo za nepodprte brskalnike. Dobra novica je, da je preprosta; lahko uporabite te podrobnosti polyfill, ki bo samodejno posnemala funkcionalnost oznake za stare brskalnike.

Prenesite to datoteko in jo povežite z html dokumentom skupaj z jQuery (najmanj 1,7+) in poskrbite, da boste polifil položili pred oznako za zaprto telo..

V oznako glave vstavite naslednjo pogojno oznako, ki bo vključevala HTML5shiv za IE8 in starejše, sicer Internet Explorer ne bo prepoznal teh novih oznak.

Zdaj pa poglejmo, kako se izkaže v Internet Explorerju:

Sedaj deluje tudi v Internet Explorerju.

• Demo
• Prenesi vir

Zaključek

Ustvarjanje takšnega učinka skritja in prikaza z JavaScriptom ali jQuery je pravzaprav sorazmerno enostavno, toda če ga uporabljamo v brskalniku, je to veliko lažja rešitev za mnoge ljudi. Ne glede na to, ali želite to storiti v JavaScriptu ali HTML5, je to vaša odločitev. Hvala za branje in upam, da ste uživali.