HTML5 Kaip naudoti

ir

žymes

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Tarp kelių naujų žymių, kurias galima rasti HTML5, Specifikacijos (pvz .: skaičius, figcaption, ir nuošalyje), išsamiai ir santrauka žymės, mano nuomone, yra naudingiausios. Naudodami šias naujas žymes galite paslėpti dalį ilgo turinio ir rodyti tik santrauką.

Mes iš tikrųjų dažnai matome šį efektą, tačiau dauguma jų vis dar remiasi „JavaScript“ arba jos broliu: jQuery, kurio dauguma žmonių nesupranta. Dabar, su šiais naujais elementais - informacija ir santrauka - viskas bus lengviau.

Taigi, pažiūrėkime, kaip žymos veikia realiu atveju.

Šioje demonstracijoje mes apibendrinsime produkto aprašymą. Pirmiausia sukurkite „išsamią“ žymą ir tada įdėkite visą turinį kartu su „suvestinės“ žyma, kaip ir toliau pateiktame pavyzdyje:

 
 
„MacBook Pro“ specifikacija
 
 
13,3 colių LED apšviestas blizgus plačiaekranis ekranas su nepertraukiamu stiklu (1280 x 800 pikselių).
 
2,4 GHz „Intel Core i5“ dviejų branduolių procesorius su 3 MB bendrai naudojamomis L3 talpyklomis už puikų daugiafunkcinį darbą.
 
„Intel HD Graphics 3000“ su 384 MB DDR3 SDRAM dalijamasi su pagrindine atmintimi.
 
500 GB serijos ATA standusis diskas (5400 RPM)
 
4 GB įdiegta RAM (1333 MHz DDR3; palaiko iki 8 GB)
 
 
 

Šiame pavyzdyje pridėjau „MacBook Pro“ specifikacijos detales ir dabar pažiūrėkime, kaip naršyklė pateikia šias žymes.

Aš taip pat pridėjau pavadinimą ir daugiau produkto aprašymų virš detalių, kad pirmiau minėta demonstracija būtų jums protingesnė. Taigi, ką manote? Tai gana paprasta, tiesa?

Naršyklė palaiko

Tačiau prieš skubant taikyti šią žymę visai jūsų svetainei, reikia pažymėti, kad šiuo metu informacija ir santraukos žyma yra palaikomi tik „Chrome“ 12 ir naujesnėse versijose.

Net naujausia „Firefox“ jų dar nepalaiko.

Taigi, jei norite naudoti šią žymą, turite įtraukti atsarginę funkciją nepalaikomoms naršyklėms. Geros naujienos, tai paprasta; jūs galite naudoti šią informaciją apie „polifilis“, kuris automatiškai pakartos senų naršyklių žymos funkciją.

Atsisiųskite šį failą ir prijunkite jį prie html dokumento kartu su jQuery (mažiausiai 1,7+) ir įsitikinkite, kad prieš uždarant kūno žymę dedate polifilą.

Ir galvos žymės viduje įterpkite tokią sąlyginę žymę, kad įtrauktumėte HTML5shiv už IE8 ir anksčiau, kitaip „Internet Explorer“ neatpažins šių naujų žymų.

Dabar pažiūrėkime, kaip paaiškėja „Internet Explorer“:

Ir dabar jis veikia ir „Internet Explorer“.

• Demo
• Atsisiųsti šaltinį

Išvada

Sukūrus tokį paslėpimo efektą su „JavaScript“ ar „jQuery“, iš tikrųjų yra gana paprasta, tačiau tai, kad ji iš tikrųjų palaikoma iš naršyklės, tikrai yra daug paprastesnis sprendimas daugeliui žmonių. Nesvarbu, ar norite tai padaryti „JavaScript“, ar HTML5, tai jūsų sprendimas. Ačiū, kad skaitėte, ir tikiuosi, kad jums tai patiko.