HTML5 Hoe

en tags te gebruiken

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Onder verschillende nieuwe tags die beschikbaar zijn in HTML5, Specificaties (zoals: figuur, figcaption, en terzijde), detail- en samenvatting tags zijn naar mijn mening de meest bruikbare. Met deze nieuwe tags kun je een deel van de lange inhoud verbergen en alleen de samenvatting weergeven.

We zien dit effect eigenlijk vaak wel, maar de meeste zijn nog steeds gebouwd op JavaScript of zijn broer: jQuery, wat de meeste mensen niet begrijpen. Nu, met deze nieuwe elementen - gegevens en samenvatting - dingen zullen gemakkelijker worden.

Laten we dus eens kijken hoe tags werken in een echt geval.

In deze demo gaan we een productbeschrijving samenvatten. Laten we eerst een tag 'details' maken en vervolgens alle inhoud samen met de tag 'summary' erin plaatsen, zoals in het onderstaande voorbeeld:

 
 
MacBook Pro-specificatie
 
 
13,3-inch breedbeeldscherm met LED-achtergrondverlichting met edge-to-edge, ononderbroken glas (resolutie van 1280 x 800 pixels).
 
2,4 GHz Intel Core i5 dual-coreprocessor met 3 MB gedeelde L3-cache voor uitstekende multitasking.
 
Intel HD Graphics 3000 met 384 MB DDR3 SDRAM gedeeld met het hoofdgeheugen.
 
500 GB seriële ATA-harde schijf (5400 RPM)
 
4 GB geïnstalleerd RAM (1333 MHz DDR3; ondersteunt maximaal 8 GB)
 
 
 

In dat voorbeeld heb ik MacBook Pro-specificatiedetails toegevoegd en laten we nu zien hoe de browser die tags weergeeft.

Ik heb ook een titel en meer beschrijvingen van het product boven de details toegevoegd om de bovenstaande demo voor u verstandiger te maken. Wat denk je ervan? Het is vrij gemakkelijk, goed?

Browser ondersteunt

Voordat u echter doorgaat met het toepassen van deze tag op uw volledige website, moet u er rekening mee houden dat de details en de samenvattingstag momenteel alleen worden ondersteund op Chrome 12 en hoger.

Zelfs de nieuwste Firefox ondersteunt ze nog niet.

Dus als u deze tag wilt toepassen, moet u een fallback-functie opnemen voor niet-ondersteunde browsers. Het goede nieuws, het is eenvoudig; U kunt deze polyfill met details gebruiken, waarmee de tagfunctionaliteit automatisch wordt gerepliceerd voor oude browsers.

Download dit bestand en koppel het aan het html-document, samen met de jQuery (minimaal 1.7+) en zorg ervoor dat je de polyfill plaatst vóór de close body tag.

En binnen de head-tag, voeg de volgende conditionele tag in om HTML5shiv voor IE8 en ouder te omvatten, anders herkent Internet Explorer deze nieuwe tags niet.

Laten we nu eens kijken hoe het komt in Internet Explorer:

En het werkt nu ook op Internet Explorer.

• demonstratie
• Download de bron

Conclusie

Het creëren van zo'n hide-and-show effect met JavaScript of jQuery is eigenlijk relatief eenvoudig, maar het is voor veel mensen zonder twijfel een veel eenvoudigere oplossing om dit effect vanuit de browser te laten ondersteunen. Of je het nu in JavaScript of in HTML5 wilt doen, het is jouw beslissing. Bedankt voor het lezen en ik hoop dat je het leuk vond.