Présentation du nouveau contenu en HTML5.1

Présentation HTML 5.1

La sortie du standard HTML5 il y a deux ans a été un événement majeur pour la communauté du développement Web. Non seulement parce qu’il contient une série impressionnante de nouvelles fonctionnalités, mais aussi parce qu’il s’agit de la première mise à jour majeure de HTML depuis la publication de la norme HTML 4.01 en 1999. Vous pouvez encore voir certains sites Web se vanter d’utiliser le standard HTML5 « moderne ».

Heureusement, nous n'aurons pas à attendre aussi longtemps pour la prochaine mise à jour du standard HTML. En octobre 2015, le W3C a commencé à travailler sur la version HTML5.1, dans le but de résoudre certains des problèmes restants du HTML5. Après plusieurs itérations, le projet a atteint le stade de « Recommandation candidate » en juin 2016, le stade de « Recommandation proposée » en septembre 2016, et enfin la recommandation du W3C a été publiée en novembre 2016. Ceux qui prêtent attention à la nouvelle norme auront peut-être remarqué que le chemin a été sinueux. De nombreuses fonctionnalités HTML5.1 initialement proposées ont été abandonnées en raison d'une mauvaise conception ou du manque de prise en charge du navigateur par le fournisseur.

Bien que HTML5.1 soit encore en développement, le W3C a commencé à travailler sur une version préliminaire de HTML5.2, qui devrait être publiée fin 2017. Cet article est un aperçu de quelques nouvelles fonctionnalités et améliorations intéressantes de HTML5.1. La prise en charge de ces fonctionnalités par les navigateurs fait encore défaut, mais nous allons au moins vous montrer quelques navigateurs prenant en charge ces fonctionnalités pour tester chaque exemple.

Le menu contextuel utilise les éléments menu et menuitems

Le projet HTML5.1 introduit deux éléments de menu différents : le contexte et la barre d'outils. Le premier est utilisé pour étendre le menu contextuel local, généralement activé par un clic droit de la souris sur la page ; le second est utilisé pour définir un composant de menu commun. Au cours du processus de développement, la barre d'outils a été abandonnée, mais le menu contextuel a survécu.

Vous pouvez utiliser la balise

pour définir un menu contenant un ou plusieurs éléments , puis le lier à n'importe quel élément à l'aide de l'attribut contextmenu.

Chaque peut être l'un des trois types suivants :

• case à cocher – permet de sélectionner ou de désélectionner une option

• 
  

• commande – permet d'effectuer une action lorsque l'on clique sur la souris

• 
  

• radio - permet d'en sélectionner une parmi un ensemble d'options.

Voici un exemple d'utilisation de base qui peut être exécuté dans Firefox 49, mais pas dans Chrome 54 actuellement.

Voir l'exemple de menu HTML5.1 de SitePoint (@SitePoint) sur CodePen.

Sur un navigateur pris en charge, cet exemple de menu contextuel devrait ressembler à ceci :

Il y a des éléments personnalisés dans le menu contextuel.

Détails et éléments de synthèse

Les nouveaux éléments et peuvent afficher et masquer des informations supplémentaires en cliquant sur la souris. C'est quelque chose que vous faites souvent lorsque vous utilisez JavaScript, et vous pouvez désormais utiliser l'élément

et l'élément

Cliquez sur l'élément pour afficher et masquer le reste de l'élément de détails.

L'exemple suivant peut être testé dans Firefox et Chrome.

Veuillez consulter la démo HTML5.1 de SitePoint (@SitePoint) sur CodePen pour plus de détails et un résumé.

Cette démo devrait ressembler à ceci sur les navigateurs pris en charge :

​Plus de types d'entrée - mois, semaine et date/heure-local

L'entrée étend trois types : mois, semaine et dateheure-locale.

Les deux premiers types vous permettent de choisir des semaines ou des mois. Dans Chrome, les deux sont affichés sous forme de calendriers déroulants et vous pouvez sélectionner une certaine semaine ou un certain mois. Lorsque vous obtenez leurs valeurs à l'aide de JavaScript, vous obtiendrez une chaîne à peu près comme celle-ci : "2016-W43" (saisie de la semaine) ; "2016-10" (saisie du mois).

Initialement, le projet HTML5.1 introduisait deux entrées de type de date : datetime et datetime-local. La différence est que datetime-local utilise le fuseau horaire de l'utilisateur, tandis que datetime vous permet de choisir le fuseau horaire. Au cours du développement, datetime a été abandonné et seul datetime-local existe désormais. L'entrée datetime-local se compose de deux parties : la date, qui peut être sélectionnée comme la semaine et le mois, et l'heure, qui peut être saisie séparément.

Ce qui suit est un exemple de tous les nouveaux types de saisie. Il peut être affiché normalement dans Chrome, mais pas dans Firefox.

Voir SitePoint (@SitePoint) Entrées HTML 5.1 semaine, mois et date/heure sur CodePen.

Cette démo devrait ressembler à ceci sur les navigateurs pris en charge :

​Images réactives

HTML 5.1 inclut plusieurs nouvelles fonctionnalités pour implémenter des images réactives sans utiliser CSS. Chaque fonctionnalité a son propre scénario d’utilisation distinct.

attribut srcset

L'attribut d'image srcset permet de répertorier plusieurs sources de données d'image alternatives avec différentes densités de pixels. Cela permet au navigateur de sélectionner une image de qualité appropriée pour l'appareil de l'utilisateur (déterminée par la densité de pixels, la mise à l'échelle ou la vitesse du réseau de l'appareil). Par exemple, dans le cas des réseaux mobiles à faible débit et des téléphones à petit écran, les utilisateurs devraient disposer d'images à faible résolution.

L'attribut srcset accepte une liste d'URL séparées par des virgules, chacune avec une modification x qui représente le rapport de pixels le plus proche (le nombre de pixels physiques représentés par un pixel CSS) de l'image demandée. Voici un exemple simple :

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

Dans cet exemple, si le rapport de pixels de l'appareil de l'utilisateur est de 1, l'image en basse résolution sera affichée ; s'il est de 2, l'image en haute résolution sera affichée s'il est de 3 ou plus, l'image en ultra haute résolution ; -res sera affiché sera affiché.

Vous pouvez également choisir d’afficher l’image dans différentes tailles. Cela nécessite d'utiliser w :

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

Dans cet exemple, l'image basse résolution est définie sur 600 px de large, l'image haute résolution est définie sur 1 000 px de large et l'ultra haute résolution est définie sur 1 400 px de large.

​attribut tailles

Vous souhaiterez peut-être afficher les images différemment en fonction de la taille de l'écran de l'utilisateur. Par exemple, vous souhaiterez peut-être afficher une image sur deux colonnes sur un écran large et une colonne sur un écran plus étroit. Ceci peut être réalisé en utilisant l'attribut size. Il permet d'attribuer la largeur de l'écran à une image puis de sélectionner l'image appropriée via l'attribut srcset. Voici un exemple :

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

Lorsque la largeur de la fenêtre d'affichage est supérieure à 40 em, l'attribut size définit la largeur de l'image à 50 % de la largeur de la fenêtre d'affichage ; lorsque la largeur de la fenêtre d'affichage est inférieure ou égale à 40 em, l'attribut size définit la largeur de l'image à 100 % de la largeur de la fenêtre d'affichage. largeur de la fenêtre.

​élément d'image

Si la modification de la taille de l'image en fonction de différents écrans ne peut toujours pas répondre aux besoins et que vous souhaitez afficher différentes images en fonction de différents écrans, vous devez utiliser l'élément image. Il vous permet de définir des images avec différentes ressources pour différentes tailles d'écran en spécifiant plusieurs éléments différents avec . L'élément sert de source de l'URL pour charger l'image.

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

Si vous souhaitez en savoir plus sur les images réactives, veuillez cliquer sur Comment créer des images réactives avec srcset.

Utilisez form.reportValidity() pour vérifier le formulaire

La méthode form.checkValidity() définie en HTML5 peut vérifier si le formulaire est conforme à un validateur prédéfini et renvoyer une valeur booléenne. La nouvelle méthode reportValidity() est similaire : elle valide également un formulaire et renvoie les résultats, mais elle peut également signaler des erreurs à l'utilisateur. Voici un exemple (veuillez tester dans Firefox ou Chrome) :

Veuillez consulter l'exemple de démonstration de validité du rapport HTML 5.1 de SitePoint (@SitePoint) sur CodePen.

Le champ de saisie "Prénom" doit obligatoirement être non vide, s'il n'est pas renseigné, il sera marqué d'une erreur. Si tout se passe comme prévu, cela ressemblera à ceci :

Propriété Allowfullscreen des frames

Le nouvel attribut booléen allowfullscreen of frames peut contrôler si le contenu peut être affiché en plein écran via la méthode requestFullscreen().

Utilisez element.forceSpellCheck() pour la vérification orthographique

La nouvelle méthode element.forceSpellCheck() permet de déclencher la vérification orthographique des éléments de texte. Il s’agit également de la première fonctionnalité répertoriée dans cet article qui n’est encore prise en charge par aucun navigateur. Peut-être que cela pourrait être utilisé pour inspecter des éléments qui n'ont pas été directement modifiés par l'utilisateur.

Fonctionnalités non écrites en HTML5.1

Certaines fonctionnalités ont été définies dans la première version mais ont finalement été supprimées, principalement en raison du manque d'intérêt des fournisseurs de navigateurs. Voici quelques-uns des plus amusants :

attribut inerte

L'attribut inerte peut désactiver l'interaction de l'utilisateur pour tous les éléments enfants, tout comme l'ajout de l'attribut désactivé à tous les éléments enfants.

Élément de dialogue

L'élément

fournit une fenêtre contextuelle native et possède même une collection de formulaires pratique - l'utilisation de l'attribut méthode sur l'élément

empêche la soumission du formulaire au serveur et ferme la fenêtre contextuelle et renvoie les résultats au serveur. popup. le fondateur de.

Cette fonctionnalité semble être toujours prise en charge dans firfox, vous pouvez donc jeter un œil à l'exemple suivant (Note du traducteur : firfox V49.0.2 ne prend pas en charge :

Voir l'exemple CodePen de l'élément de dialogue HTML SitePoint (@SitePoint).

Plus d'articles de l'auteur

• Opérationnel avec ESLint — le Linter JavaScript enfichable

• 
  

• Tests de régression visuelle avec PhantomCSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!