Le W3C (World Wide Web Consortium) à officialisé le 1er novembre 2016 la version 5.1 du HTML. Le développement de cette version 5.1 avait débuté le 17 décembre 2012 et été validé le 1er novembre 2016. Nous allons voir dans ce post les principales nouveautés disponibles avec la version 5.1.
Tout d'abord vous pouvez accéder ici à un tableau qui récapitule les nouveautés et les améliorations sur les anciens composants.
Les nouveautés
srcset et <picture>
Cette nouveauté va faire plaisir au économe de la bande passante. En effet cette fonctionnalité va vous permettre de définir l'affichage d'une image spécifique en fonction de la résolution de l'écran du client.
La condition de la taille est définie par l'attribut "media" qui aura pour valeur des media queries.
On peut donc définir différentes images selon la résolution et en définir une par défaut à afficher si aucune résolution ne rentre dans le scope pris en compte.
Nouveaux types pour les input :
- week
<input type="week"> permet de sélectionner une semaine spécifique pour une année donnée sous la forme : numéro de la semaine / année.
- month
<input type="month"> permet de sélectionner un mois spécifique pour une année donnée sous la forme de : mois / année.
- datetime-local
<input type="datetime-local"> permet de sélectionner une date spécifique sous la forme : jour / mois / année / heure / minute.
Menu contextuel (uniquement sur firefox)
Cette nouvelle fonctionnalité va vous permettre de définir un menu en fonction de l'utilisateur, donc un menu contextuel. Il vous sera ainsi possible de rajouter des éléments à afficher dans le menu lors d'un clic droit sur un élément HTML de la page. Ceci ce traduit par l'utilisation de la balise <menu> avec l'attribut "type" qui aura pour valeur "context".
Une petite démo sera plus compréhensible ici
Details et summary
Avec ces nouvelles balises, fini l'utilisation du Javascript pour afficher et masquer du contenu. La balise <details> représentera les informations non visibles par défaut, puis en cliquant, le contenu se déroule et devient visible. Attention si la balise <summary> est absente alors le contenu de <details> sera affiché par défaut
Petite demo ici
sources :
https://www.grafikart.fr/blog/w3C-html-5-1
https://www.louistiti.fr/nouveautes-html-5-1/55