HTML5 Sådan bruges og Tags
Blandt flere nye tags, der er tilgængelige i HTML5, Specifikationer (såsom: figur, figcaption, og til side), detalje og Resumé tags, efter min mening er de mest nyttige. Med disse nye tags kan du skjule nogle af det lange indhold og kun vise resuméet.
Vi ser faktisk denne effekt ofte rundt, men de fleste er stadig bygget på JavaScript eller dets bror: jQuery, som de fleste ikke forstår. Nu med disse nye elementer - detaljer og Resumé - ting bliver lettere.
Så lad os se, hvordan tags fungerer i et ægte tilfælde.
I denne demo skal vi opsummere en produktbeskrivelse. Lad os først lave et 'detaljer' tag og derefter sætte alt indhold sammen med 'sammendrag'-taggen inde i det, som i eksemplet nedenfor:
MacBook Pro-specifikation
- 13,3-tommers LED-baggrundsbelyst blank widescreen-skærm med kant til kant, uafbrudt glas (1280 x 800 pixel opløsning).
- 2,4 GHz Intel Core i5 dual-core processor med 3 MB delt L3-cache for fremragende multitasking.
- Intel HD Graphics 3000 med 384 MB DDR3 SDRAM delt med hovedhukommelsen.
- 500 GB Serial ATA harddisk (5400 omdr./min)
- 4 GB installeret RAM (1333 MHz DDR3; understøtter op til 8 GB)
I dette eksempel har jeg tilføjet MacBook Pro-specifikationsdetaljer, og nu skal vi se, hvordan browseren gør disse tags.
Jeg har også tilføjet en titel og flere beskrivelser af produktet over detaljerne for at gøre ovenstående demo mere fornuftig for dig. Så hvad tror du? Det er ret nemt, rigtigt?
Browser understøtter
Men før du skynder dig for at anvende dette tag på hele dit website, skal det bemærkes, at detaljerne og sammendragstegnet kun understøttes i Chrome 12 og derover.
Selv den nyeste Firefox understøtter dem ikke endnu.
Så hvis du vil anvende dette tag, skal du inkludere en tilbagekaldelsesfunktion for ikke understøttede browsere. Den gode nyhed det, det er enkelt; Du kan bruge disse detaljer polyfill, som automatisk kopierer tagfunktionaliteten til gamle browsere.
Download denne fil og link den til html-dokumentet sammen med jQuery (1.7+ ved minimum) og sørg for at placere polyfillet før det tætte krops tag.
Og inden i hovedetiketten skal du indsætte følgende betingede tag for at inkludere HTML5shiv til IE8 og tidligere, ellers genkender Internet Explorer ikke disse nye tags.
Lad os nu se, hvordan det viser sig i Internet Explorer:
Og det virker nu også på Internet Explorer.
- Demo
- Download kilde
Konklusion
Oprettelse af en sådan hide-and-show-effekt med JavaScript eller jQuery er faktisk forholdsvis let, men det er helt sikkert en meget nemmere løsning for mange mennesker at have det nativt støttet af browseren. Uanset om du vil gøre det i JavaScript eller i HTML5, er det din beslutning. Tak for at læse, og jeg håber du nød det.
