HTML5 Kako koristiti

i

oznake

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Među nekoliko novih oznaka koje su dostupne u HTML5, Specifikacije (kao što su: lik, figcaption, i u stranu), detalj i Sažetak Oznake, po mom mišljenju, su najkorisnije. S ovim novim oznakama možete sakriti dio dugog sadržaja i prikazati samo sažetak.

Mi zapravo često vidimo ovaj efekt, ali većina njih je još uvijek izgrađena na JavaScriptu ili njegovom bratu: jQuery, koji većina ljudi ne razumije. Sada, s ovim novim elementima - detalji i Sažetak - stvari će biti lakše.

Dakle, da vidimo kako oznake funkcioniraju u stvarnom slučaju.

U ovom ćemo prikazu prikazati opis proizvoda. Najprije stvorimo oznaku "pojedinosti", a zatim stavimo sav sadržaj zajedno s oznakom "sažetak" u nju, kao u primjeru u nastavku:

 
 
Specifikacija za MacBook Pro
 
 
Sjajni široki zaslon s LED osvjetljenjem od 13,3 inča s neprekinutim staklom od ruba do ruba (rezolucija 1280 x 800 piksela).
 
2.4 GHz Intel Core i5 dvojezgreni procesor s 3 MB zajedničkog L3 cachea za izvrsno obavljanje više zadataka.
 
Intel HD Graphics 3000 s 384 MB DDR3 SDRAM-a koji se dijeli s glavnom memorijom.
 
500 GB Serial ATA tvrdi disk (5400 o / min)
 
4 GB instaliranog RAM-a (DDR3 od 1333 MHz; podržava do 8 GB)
 
 
 

U tom primjeru dodao sam detalje specifikacije za MacBook Pro, a sada ćemo vidjeti kako preglednik te oznake prikazuje.

Također sam dodao naslov i više opisa proizvoda iznad pojedinosti kako bi gornji demo bio razumniji za vas. Pa što ti misliš? To je vrlo jednostavno, točno?

Podrška za preglednik

Međutim, prije nego što požurite primijeniti ovu oznaku na cijelo web-mjesto, treba napomenuti da su podaci i oznaka sažetka trenutačno podržani samo za Chrome 12 i novije.

Čak ih i najnoviji Firefox još ne podržava.

Dakle, ako želite primijeniti ovu oznaku, morate uključiti zamjensku funkciju za nepodržane preglednike. Dobra vijest je, jednostavna je; možete koristiti ove detalje polyfill, koji će automatski replicirati funkcionalnost oznake za stare preglednike.

Preuzmite ovu datoteku i povežite je s html dokumentom zajedno s jQuery (minimalno 1,7+) i provjerite jeste li polifil stavili ispred oznake oznake tijela.

A unutar oznake glave umetnite sljedeću uvjetnu oznaku da biste uključili HTML5shiv za IE8 i ranije, u suprotnom Internet Explorer neće prepoznati te nove oznake.

Sada ćemo vidjeti kako ispada u programu Internet Explorer:

I sada radi i na Internet Exploreru.

• Demo
• Preuzimanje izvora

Zaključak

Stvaranje takvog efekta skrivanja i prikazivanja pomoću JavaScripta ili jQuery-a zapravo je relativno jednostavno, ali to što ga izvorno podržava preglednik je svakako mnogo lakše rješenje za mnoge ljude. Bez obzira želite li to učiniti u JavaScriptu ili HTML5-u, to je vaša odluka. Hvala na čitanju i nadam se da ste uživali.