10 nouvelles fonctionnalités de HTML 5.1 et comment les utiliser

La spécification HTML a fait l'objet d'une refonte majeure il y a quelques semaines lorsque le W3C a publié sa nouvelle recommandation HTML 5.1 en novembre 2016. Dans son récent article, le W3C a qualifié la nouvelle version majeure de « gold standard» . nous pouvons utiliser le HTML pour créer des expériences web plus flexibles.

Dans cet article, nous allons jeter un oeil à ses nouvelles fonctionnalités que vous pouvez utiliser sans toucher à JavaScript, mais les améliorations de l'arrière-plan JavaScript sont également remarquables, comme vous pouvez le voir dans le journal des modifications officielles .

Notez qu'actuellement, tous les navigateurs ne prennent pas en charge toutes ces fonctionnalités, alors n'oubliez pas de vérifier la compatibilité du navigateur avant de les utiliser en production. Si vous êtes intéressé par le développement du standard HTML, vous pouvez également consulter le document de travail de HTML 5.2.

1. Définir plusieurs ressources d'image pour un design réactif

En HTML 5.1, vous pouvez utiliser étiqueter avec l'attribut srcset pour rendre la sélection d'image réactive possible. le tag représente un conteneur d'image qui permet aux développeurs de déclarer différentes ressources d'image afin de s'adapter à la taille de la fenêtre, à la densité de pixels de l'écran, au type d'écran et à d'autres paramètres utilisés dans la conception adaptative.

le tag lui-même n'affiche rien, il fonctionne simplement comme contexte pour les multiples ressources d'image . Vous devez déclarer la ressource image par défaut en tant que valeur de l'attribut src du tag, et les ressources d'image alternatives vont dans les attributs srcset de la et éléments.

Exemple de code:

2. Afficher ou masquer des informations supplémentaires

Avec le

et

tags, vous pouvez ajouter des informations étendues à un élément de contenu. Les informations supplémentaires ne sont pas affichées par défaut, mais si les utilisateurs sont intéressés, ils ont la possibilité de jeter un coup d'œil . Dans votre code, vous êtes censé placer le

tag à l'intérieur

. Après le

tag, vous pouvez ajouter les informations supplémentaires que vous souhaitez masquer.

Exemple de code:

Message d'erreur 
 Nous n'avons pas pu terminer le téléchargement de cette vidéo. 
 Nom de fichier: 
 votre fichier.mp4 
 Taille du fichier: 
 100 Mo 
 Durée: 
 00:05:27 

Voici à quoi ressemble cet exemple de code dans Firefox 50.0.2:

3. Ajouter des fonctionnalités au menu contextuel du navigateur

Avec le element et son attribut type="context", vous pouvez ajouter des fonctionnalités personnalisées au menu contextuel du navigateur . Vous devez assigner comme l'élément enfant de la

marque. L' id du L'élément doit avoir la même valeur que l'attribut contextmenu de l'élément auquel nous voulons ajouter le menu contextuel (qui est l'élément dans l'exemple ci-dessous).

Exemple de code:

 Faites un clic droit sur moi 

le tag peut avoir trois types différents : "checkbox", "command" (auquel vous devez ajouter une action avec JavaScript), et radio . Il est possible d'ajouter plus d'un élément de menu à un menu contextuel, mais la prise en charge par le navigateur de cette fonctionnalité n'est pas encore très bonne . Chrome 54 ne le prend pas en charge et Firefox 50 autorise uniquement la présence d'un menu contextuel supplémentaire. Ci-dessous vous pouvez voir comment l'exemple de code fonctionne dans Firefox 50.

4. En-têtes et pieds de page Nest

HTML 5.1 vous permet d' imbriquer des en-têtes et des pieds de page si chaque niveau est contenu dans le contenu de coupe . La note ci-dessous est une capture d'écran des documents W3C, et conseille les développeurs sur la bonne façon d'imbriquer en-tête et pied de page.

Cette fonctionnalité peut être utile si vous souhaitez ajouter des en-têtes élaborés à des éléments de section sémantiques, tels que

et

. L'exemple de code ci-dessous crée une barre latérale à l'intérieur de l'en-tête, la