10 nouvelles fonctionnalités de HTML 5.1 et leur utilisation IRL

La spécification HTML a eu un refonte majeure il y a quelques semaines lorsque le W3C a publié son nouvelle recommandation HTML 5.1 en novembre 2016. Dans son récent billet de blog, W3C a appelé la nouvelle version majeure la étalon-or, HTML 5.1 nous offre de nouvelles façons d'utiliser HTML pour créer des expériences Web plus flexibles.

Dans cet article, nous allons examiner ses nouvelles fonctionnalités, dont vous pouvez tirer parti sans toucher JavaScript, Cependant, les améliorations apportées à l'arrière-plan JavaScript sont également remarquables, comme vous pouvez le constater dans journal officiel des modifications.

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

1. Définir plusieurs ressources d'image pour une conception réactive

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

le l'étiquette elle-même n'affiche rien, elle fonctionne simplement comme contexte pour les ressources d'image multiples. Vous devez déclarer le ressource image par défaut comme la valeur de la src attribut du tag, et le ressources images alternatives aller dans le srcset attributs 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 morceau de contenu. Les informations supplémentaires n'est pas affiché par défaut, mais si les utilisateurs sont intéressés, ils avoir la possibilité de jeter un oeil. Dans votre code, vous êtes censé placer le

étiquette à l'intérieur

. Après le

taguer vous pouvez ajouter les informations supplémentaires tu veux te cacher.

Exemple de code:

 
 
Message d'erreur
 
 
Nous n'avons pas pu terminer le téléchargement de cette vidéo.
 
 
Nom de fichier:
votrefichier.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 élément et son type = "contexte" attribuer, vous pouvez ajouter des fonctionnalités personnalisées au menu contextuel du navigateur. Vous devez assigner comme élément enfant de la

étiquette. le identifiant du élément doit porter la même valeur que le menu contextuel attribut de l'élément auquel nous voulons ajouter le menu contextuel (qui est le élément dans l'exemple ci-dessous).

Exemple de code:

Clic droit moi

le tag peut avoir trois types différents, "case à cocher", "commander" (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 le support du navigateur pour cette fonctionnalité est pas encore très bien. Chrome 54 ne le prend pas en charge et Firefox 50 ne permet la présence que d’un seul menu contextuel supplémentaire. Ci-dessous, vous pouvez voir comment fonctionne l'exemple de code dans Firefox 50.

4. En-têtes et pieds de page du nid

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

Cette fonctionnalité peut être utile si vous souhaitez ajouter en-têtes élaborés d'éléments de section sémantique, tel que

et

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