HTML 5.2中有些什么新变化？

不到一个月前，HTML 5.2成为W3C官方的推荐标准（REC）。当一个规范进入REC阶段时，就意味着它已经得到了W3C成员和负责人的正式认可，并且W3C正式把它推荐推荐给用户进行部署，并且由网页开发人员实施。

在REC阶段，任何新的特性应该至少有2个独立的实现。这对于我们网页开发人员来说是开始实现任何新功能的好时机。

在HTML 5.2中，有一些内容被增减，详情可以在官方的HTML 5.2 Changes页面上看到（https://www.w3.org/TR/html52/changes.html#changes）。在本文中，我会介绍一些影响到我的变化。

新功能

一个本地的<dialog> 元素

在HTML 5.2的所有变化中，引入 <dialog>元素（一个本地对话框）是令我最兴奋的事情。对话框在web上非常流行，但是它们实现方式都有所不同。对话框也很难做到易于访问，这导致 web 上的大多数对话框实际上无法服务于不以可视形式浏览 web 的用户（译者注：例如为盲人转换为语音）。

新的 <dialog>元素旨在改变这一点，提供了一个简单的方法来包含一个模态对话框，而不必担心很多的缺陷。我将写一篇关于这个元素是如何工作的单独的，详细的文章，但这里有一些基础知识。

该对话框使用 <dialog>元素创建：

<dialog>        <h2>Dialog Title</h2>      <p>Dialog content and other stuff will go here</p>    </dialog>

默认情况下，除非应用了打开属性，否则该对话框将从视图（并从DOM访问）中隐藏。

    <dialog open>

open属性可以通过调用 show()和 close()方法来切换，任何 HTMLDialogElement都可以使用这个方法。

    <button id="open">Open Dialog</button>      <button id="close">Close Dialog</button>    <dialog id="dialog">        <h2>Dialog Title</h2>      <p>Dialog content and other stuff will go here</p>    </dialog>    <script>      const dialog = document.getElementById("dialog");    document.getElementById("open").addEventListener("click", () => {        dialog.show();    });    document.getElementById("close").addEventListener("click", () => {        dialog.close();    });    </script>

Chrome浏览器中已经有了 <dialog>元素的支持，并且在Firefox中有一个标志。

使用iFrames中的Payment Request API

Payment Request API(https://www.w3.org/TR/payment-request/)是签出表单的本地替代方案。它的目的是提供一个标准化的和一致的方法，使在网上支付的用户，将付款信息的检索操作放到浏览器，而不是在每个网站上去逐个查看自己的账单。

在HTML 5.2之前，这些支付请求不能通过嵌入在文档中的iframe来完成。这使得第三方嵌入式支付解决方案（例如Stripe，Paystack）基本上不可能利用这个API，因为它们的支付接口通常是在iframe中处理的。

HTML 5.2引入了 allowpaymentrequest属性，该属性应用于iframe时，将允许它在用户处于托管网页时使用Payment Request API。

  <iframe allowpaymentrequest>

苹果设备的图标大小

要定义网页图标，我们使用文档头部的 <linkrel=“icon”>元素。要定义不同大小的图标，可以使用 sizes属性。

   <link rel="icon" sizes="16x16" href="path/to/icon16.png">      <link rel="icon" sizes="32x32" href="path/to/icon32.png">

这个属性虽然纯粹是个建议，但是如果有多个尺寸可用的话， user agents可以决定使用哪个尺寸的图标，特别是当大多数设备都有自己的“最佳”图标尺寸时。

在HTML 5.2之前， sizes属性只有在链接关系是图标时才有效。但是，Apple的iOS设备不支持 sizes属性。为了解决这个问题，苹果推出了一个设备专用关系 appple-touch-icon，可以用来定义设备上使用的图标。

在HTML 5.2中，如果关系是 apple-touch-icon，就不再只是图标了，现在规范允许使用 sizes属性。这将允许我们为不同的苹果设备提供不同大小的图标。虽然，据我目前所知，苹果设备仍然不支持 sizes属性，但是如果他们愿意的话，这个变化是非常用的。

在 <body>中的样式

通常，使用 <style>元素定义的内联CSS被放置在HTML文档的 <head>内。随着组件化开发的增加，开发人员已经看到了编写和放置样式以及与其相关的html元素的好处。

在HTML 5.2中，现在HTML文档的 <body>内的任何地方定义了一个嵌入的 <style>块。这意味着我们可以使风格更接近他们使用的地方。

 <body>          <p>I’m cornflowerblue!</p>        <style>            p { color: cornflowerblue; }        </style>        <p>I’m cornflowerblue!</p>    </body>

但是，仍然注意到，出于性能原因，样式应该优选地放置在 <head>中。根据规范，

   样式元素应该最好用在文档的头部。 在文档的主体中使用样式可能导致重新设置，触发布局和/或导致重新绘制，因此应该小心使用。

还应该注意的是，如示例所示，样式不在作用域内。稍后在HTML文档中定义的内联样式仍然适用于之前定义的元素，这就是为什么它可能会触发重绘。

标题在 <legend>中

在表单中， <legend>元素表示 <fieldset>中表单字段的标题。在HTML 5.2之前，图例的内容必须是纯文本。现在，我们可以包含标题元素。

 <fieldset>          <legend><h2>Basic Information</h2></legend>        <!-- Form fields for basic information -->    </fieldset>      <fieldset>          <legend><h2>Contact Information</h2></legend>        <!-- Form fields for contact information -->    </fieldset>

当我们想要使用 fieldset元素来组织表单的不同部分时，这非常有用。在这种情况下，使用标题是非常有意义的，这使得依赖于文档大纲的用户可以更轻松地导航这些表单部分。

删除的功能

在HTML 5.2中，删除了一些元素，即：

keygen：用于帮助生成表单的公钥
menu和 menuitem：用于创建导航或上下文菜单

新功能

一个本地的<dialog> 元素

使用iFrames中的Payment Request API

苹果设备的图标大小

最新的有效编写方法

多个 <main>元素

在 <body>中的样式

标题在 <legend>中

删除的功能

最近失效的做法

没有内联，浮动或 <p>的块级子元素

没有了严格的文件类型

更多相关文章

随机推荐