Quelles sont les nouvelles fonctionnalités de HTML5.1 ?-Tutoriel H5-php.cn

HTML 5.1Présentation

La sortie du standard HTML5 il y a deux ans a été un grand événement pour le développement web communauté . 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'avons 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 fournisseur de navigateur.

Bien que HTML5.1 soit encore en développement, le W3C a commencé à travailler sur la version 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 brouillon 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 en cliquant sur la souris ;
radio – permet d'en sélectionner une parmi un ensemble d'options.

Voici un exemple d'utilisation basique qui peut être exécuté dans Firefox 49, mais il n'est actuellement pas disponible dans Chrome 54.

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 :

A HTML 5.1 context menu

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

Éléments Détails et Résumé

Les nouveaux éléments et peuvent afficher et masquer des informations supplémentaires en cliquant sur la souris. C'est ce que

est souvent fait lorsque vous utilisez JavaScript, et vous pouvez désormais utiliser l'élément

et l'élément

En cliquant sur l'élément

, vous pouvez 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 :

Details and summary elements

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

　Extension d'entrée 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 d'entrée. Il peut être affiché normalement dans Chrome, mais pas dans Firefox.

Consultez les entrées HTML 5.1 semaine, mois et date/heure de SitePoint (@SitePoint) sur CodePen.

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

Week, month and datetime-local inputs

　　响应式图片

　　HTML5.1包括几个在不使用CSS情况下实现响应式图片的新特性。每个特性都有自己单独的使用场景。

　　srcset属性

　　srcset图像属性允许列出多个可用于替代的图片数据源，这些数据源的像素密度不同。这使得浏览器可以针对用户设备选择合适质量的图片（由设备的像素密度、缩放比例或者网速决定）。例如，在低速手机网络和小屏幕手机的情况下，应该为用户提供低像素的图片。

　　srcset属性接受一个用逗号分隔的URL列表，每个URL带有一个表示最接近所请求图片像素比（一个CSS像素所代表的物理像素数量）的修饰x。下面是一个简单的例子：

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

Copier après la connexion

　　在这个例子中，如果用户设备的像素比是1，图片low-res将会被展示；如果是2，图片high-res将会被展示；如果是3或者更大，图片ultra-high-res将会被展示。

　　或者，你可以选择将图片展示成不同尺寸。这需要使用w：

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

Copier après la connexion

　　在这个例子中，图片low-res被定义成600px宽，图片high-res被定义成1000px宽，ultra-high-res是1400px宽。

　　sizes属性

　　你可能想根据用户屏幕尺寸来使用不同方式展示图片。例如，你可能想在宽屏幕上用两栏展示图片，窄一些的屏幕上用一栏。这点用sizes属性就可以实现。它允许你为图片分配屏幕的宽度，然后通过srcset属性选择合适的图片。下面是一个例子：

<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"
>

Copier après la connexion

　　当视口宽度大于40em时，sizes属性把图片的宽度定义为视口宽度的50%；当视口（viewport）宽度小于或者等于40em时，把图片宽度定义为视口宽度的100%。

　　picture元素

　　如果根据屏幕不同改变图片的尺寸还是不能满足需求，你想根据屏幕不同展示不同的图片，那就需要使用picture元素。它允许你通过用指定多个不同元素，来为不同尺寸的屏幕定义不同资源的图片。元素作为URL加载图片的来源。

<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>

Copier après la connexion

　　如果你想知道更多关于响应式图片的东西，请戳How to Build Responsive Images with srcset.