HTML5 Comment utiliser les balises

et

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Parmi plusieurs nouvelles balises disponibles en HTML5, les spécifications (telles que: figure, figcaption, et de côté), détail et résumé les balises, à mon avis, sont les plus utiles. Avec ces nouvelles balises, vous pouvez masquer une partie du contenu long et afficher uniquement le résumé..

En fait, nous voyons souvent cet effet autour de nous, mais la plupart d'entre eux sont toujours basés sur JavaScript ou son frère: jQuery, que la plupart des gens ne comprennent pas. Maintenant, avec ces nouveaux éléments - détails et résumé - les choses vont devenir plus faciles.

Voyons donc comment fonctionnent les tags dans un scénario réel.

Dans cette démonstration, nous allons résumer une description du produit. Commençons par créer une balise 'details', puis y placer tout le contenu, ainsi que la balise 'summary', comme dans l'exemple ci-dessous:

 
 
Spécification MacBook Pro
 
 
Écran large brillant de 13,3 pouces rétro-éclairé par LED avec verre sans coupure bord à bord (résolution de 1280 x 800 pixels).
 
Processeur double cœur Intel Core i5 à 2,4 GHz avec 3 Mo de cache L3 partagé pour un multitâche excellent.
 
Intel HD Graphics 3000 avec 384 Mo de SDRAM DDR3 partagés avec la mémoire principale.
 
Disque dur Serial ATA de 500 Go (5 400 tr / min)
 
4 Go de RAM installée (DDR3 1333 MHz; prend en charge jusqu'à 8 Go)
 
 
 

Dans cet exemple, j'ai ajouté les détails de la spécification MacBook Pro et voyons maintenant comment le navigateur affiche ces balises..

J'ai également ajouté un titre et plus de descriptions du produit au-dessus des détails pour rendre la démonstration ci-dessus plus sensible pour vous. Alors qu'est-ce que tu en penses? C'est assez facile, non?

Prise en charge du navigateur

Cependant, avant de vous dépêcher d'appliquer cette balise à l'ensemble de votre site Web, notez que la balise de détails et la balise récapitulative ne sont actuellement prises en charge que sur Chrome 12 et les versions ultérieures.

Même le dernier Firefox ne les supporte pas encore.

Donc, si vous souhaitez appliquer cette balise, vous devez inclure une fonction de secours pour les navigateurs non pris en charge. La bonne nouvelle c'est simple; vous pouvez utiliser ce polyfill de détails, qui répliquera automatiquement la fonctionnalité de balise pour les anciens navigateurs.

Téléchargez ce fichier et liez-le au document html avec jQuery (1.7+ au minimum) et assurez-vous de placer le polyfill avant la balise close body.

Et à l'intérieur de la balise head, insérez la balise conditionnelle suivante pour inclure HTML5shiv pour IE8 et les versions antérieures, sinon Internet Explorer ne reconnaîtra pas ces nouvelles balises..

Voyons maintenant comment cela se passe dans Internet Explorer:

Et cela fonctionne maintenant aussi sur Internet Explorer.

• Démo
• Source de téléchargement

Conclusion

Créer un tel effet masquer-afficher avec JavaScript ou jQuery est en fait relativement facile, mais le faire supporter nativement par le navigateur est certainement une solution beaucoup plus simple pour de nombreuses personnes. Que vous souhaitiez le faire en JavaScript ou en HTML5, c'est à vous de décider. Merci d'avoir lu et j'espère que vous avez apprécié.