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
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
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 letag à 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
Exemple de code:
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