Quelles sont les nouvelles fonctionnalités de HTML5.1 ?

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 :

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 :

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 :

　　响应式图片

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

　　在这个例子中，如果用户设备的像素比是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"
>

　　在这个例子中，图片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"
>

　　当视口宽度大于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>

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

　　用form.reportValidity()验证表单

　　HTML5定义的form.checkValidity()方法可以检查表单是否符合事先定义好的验证器然后返回一个布尔值。新的reportValidity() 方法很相似 — 它也可以检验一个表单并返回结果，但是它还能为用户报告错误。下面是一个例子（请在Firefox或Chrome中测试）：

　　请在CodePen上看SitePoint (@SitePoint)的例子HTML 5.1 report validity demo。

　　"First name"输入框被要求非空，如果不填写它将被标记有错误。如果符合预期，它将是这样：

　　frames的AllowfullscreenFrames的Allowfullscreen属性

　　frames新的布尔属性allowfullscreen可以控制内容是否可以通过requestFullscreen()方法来全屏展示内容。

　　使用element.forceSpellCheck()进行拼写检查

　　新的element.forceSpellCheck()方法允许你在text元素上触发拼写检查。这也是本文所列出的所有特性中第一个还不被任何浏览器支持的特性。也许，这可以用来进行检查还没有被用户直接编辑的元素。

　　没有写进HTML5.1的特性

　　一些特性在第一版的草案中被定义但是最终被删除了，大部分原因是浏览器厂商缺乏兴趣。下面是其中一些有趣的方法：

　　inert属性

　　inert属性可以禁用所有子元素的用户交互，就像给所有子元素都加了disabled属性。

　　dialog元素

　　

元素提供一个原生的弹出框，它甚至有一个方便的表单集合 - 在

上使用method属性可以阻止表单提交到服务器上，而是关闭弹出框并把结果返回给弹出框的建立者。

　　这个特性似乎在firfox仍然支持，所以可以看看下面这个例子（译者注：firfox V49.0.2不支持：

　　请看SitePoint (@SitePoint)在CodePen的例子 HTML dialog element。

Supplément

Ceci n'est pas un article sur toutes les nouvelles fonctionnalités de HTML5.1. De nombreuses nouvelles fonctionnalités et modifications mineures ont été supprimées de la norme actuelle, et certaines fonctionnalités qui n'ont jamais été utilisées ont également été supprimées.

【Recommandations associées】

1. Développement d'applications mobiles HTML5 - introduction détaillée au rôle de la fenêtre d'affichage (images et textes)

2. 🎜>20 Comprenez HTML5 en quelques minutes et découvrez les nouvelles fonctionnalités de H5

3

Parcours d'apprentissage H5 - nouvelles fonctionnalités de H5 (1) .

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!