Les nouveautés de l'HTML 5.1

Le World Wide Web Consortium (W3C) qui est une communauté internationale qui développe des standards pour l'évolution du Web a officialisé la version 5.1 du langage HTML. Le développement de cette spécification a débuté en décembre 2012 et a été validée en tant que recommandation par le W3C le 1er novembre 2016. Nous allons voir ensemble les ajouts importants de cette recommandation.

Les nouveautés

picture et srcset

Ce nouvellement a pour but d'améliorer le chargement des images en sélectionnant l'image à charger suivant la taille de l'écran de l'utilisateur. On utilise une media query sur l'élément fils "source" via l'attribue "media".

<picture>
  <source media="(max-width: 480px)"
            srcset="http://monurl.fr/small.jpg">
  <source media="(max-width: 640px)"
            srcset="http://monurl.fr/medium.jpg">
  <source media="(max-width: 1024px)"
            srcset="http://monurl.fr/large.jpg">
  <img src="http://monurl.fr/large.jpg" alt="Faon">
</picture>
<!-- demo https://codepen.io/Louistiti/pen/GNLGPa?editors=1000 -->

Dans le cas où un navigateur n'est pas compatible, alors on affiche une image par défaut via <img>. Pour ajouter le support de cette balise sur les navigateurs non compatibles vous pouvez utiliser ce polyfill.

details et summary

Ces 2 balises permettent de générer un widget permettant d'afficher et de masquer du contenu sans JavaScript.

<details>
  Ceci est un texte.
</details>
<details open>
  <summary>
    Introduction
  </summary>
  Angular 2 est un framework JavaScript développé par Google. Son code a été complètement revu par rapport à Angular 1, blablabla...
</details>

<details> permet de masquer des informations et affichera le texte "détails" qui, une fois cliqué, permettra de révéler le texte complet. Il est possible de changer le texte à afficher en utilisant la balise <summary> et aussi de dévoiler le texte par défaut en utilisant l'attribut open. Il existe de nombreux polyfill pour cette balise. Voir la démo.

Menu contextuel

Cette balise est un peu spéciale car elle n'agit pas sur la page en elle même mais sur le menu contextuel de l'utilisateur. Il est ainsi possible de rajouter des éléments dans le menu s'affichant lors du clic droit sur un élément HTML.

<p contextmenu="custom-menu">
  Faites un clic droit sur ce paragraphe pour ouvrir le menu personnalisé, Firefox only :(
</p>

<menu type="context" id="custom-menu">
  <menuitem type="checkbox" checked="true">Je suis une checkbox</menuitem>
  <menuitem type="command" icon="https://www.grafikart.fr/images/logo.png" onclick="window.open('https://www.grafikart.fr/q/php+tutoriel', 'shareWindow');">Rechercher sur le site</menuitem>
</menu>

Cette fonctionnalité ne fonctionne pour le moment que sur Firefox. Voir sur codepen.io.

Nouveaux types : week, month et datetime-local

<input type="week"> permet de sélectionner une semaine spécifique sous forme de : semaine / année.
<input type="month"> permet de sélectionner un mois spécifique sous forme de : mois / année.
<input type="datetime-local"> permet de sélectionner une date spécifique sous forme de : jour / mois / année / heure / minute.

Voir la démo.

Autres

Bien entendu, il y a d'autres changements comme l'amélioration de l'API requestAnimationFrame pour faire des animations plus efficaces, la suppression de l'attribue multiple pour les inputs de type range, l'ajout de la méthode reportValidity() qui retourne immédiatement à l'affichage d'une page si un formulaire est valide ou non, etc.

Vers HTML 5.2

Le W3C travaille déjà sur la prochaine version et a sorti le premier brouillon public le 18 août 2016. Ils aimeraient passer cette version en recommandation, fin 2017.