HTML 5.2 新特性

本文首发于知乎，可以通过点击文章底部的阅读全文来访问知乎原地址。

原文作者：Ire Aderinokun

原文地址：https://bitsofco.de/whats-new-in-html-5-2/

不到一个月前(2017年12月14日，译者注)，HTML 5.2成为正式的W3C推荐标准(REC)。当一个规范到达了REC阶段时，这意味着它已经得到了W3C成员和主管的正式认可，并且W3C正式推荐各浏览器厂商进行开发，也推荐web开发者使用全新的特性。

在REC阶段，任何新特性都应该至少有两个独立的实现。对于我们这些开始使用新特性的web开发人员来说是一个伟大的时代。

在HTML 5.2中，有许多添加和删除的属性，所有这些都可以在官方的HTML 5.2变更履历页面上看到。在本文中，我将介绍一些我认为会影响我开发的变化。

变更履历地址：https://www.w3.org/TR/2017/REC-html52-20171214/

新特性

原生的元素

在HTML 5.2的所有变更中，最让我兴奋的是元素的引入——一个原生的对话框。对话框在web上已经非常流行，但是每个实现都或多或少的存在着差异。对话框也非常难以用一种可访问的方式实现，这导致web上的大多数对话框对于那些视觉障碍者来说是无法使用的。

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

对话框通过使用元素来创建：

默认情况下，对话框是默认不显示的（DOM也是不可访问的），除非你使用open属性。

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

元素已经在Chrome中得到了支持，并且在Firefox中的版本规划中已经出现。

数据来源自caniuse.com

在iframe中的使用支付请求API（Payment Request API）

新的支付请求API是替代结账表单的一种原生方法。它旨在是为用户提供一种标准化的、一致的支付方式，通过将支付信息的处理方式转移到浏览器上，而不是在每个网站上进行单独的结帐表单。

在HTML 5.2之前，这些支付请求不能由嵌入在文档中的iframe进行。这使得第三方嵌入式支付解决方案(如Stripe, Paystack)基本上不可能利用这个API，因为他们的支付接口通常是在iframe中处理的。

HTML 5.2引入了allowpaymentrequest属性，当该属性应用到iframe时，浏览器允许使用支付请求API。

Apple Icons支持多个尺寸

想要定义一个页面的图标，我们可以在文档的头部添加元素。

虽然这个属性是纯建议性的，但允许各浏览器决定是否可以使用多个大小的图标，这主要是因为大多数设备都有自己的“最优”图标尺寸。

在HTML 5.2之前，只有当链接关系为图标时，size属性才有效。然而，苹果的iOS设备并不支持尺寸属性。为了解决这个问题，苹果公司推出了一种设备专用的关系—— apppl -touch-icon，可以用来定义设备上使用的图标。

在HTML 5.2中，规范现在允许apple-touch-icon使用sizes属性了，不再仅仅适用于icon了。这将允许我们为不同的苹果设备提供不同尺寸的图标。尽管，据我目前所知，苹果设备仍然不支持sizes属性，不过这一变化会对将来是有积极作用的。

新添加的有效实践

除了新特性之外，HTML 5.2还启用了一些以前无效的HTML编写实践。

复数的元素

元素表示web页面的主要内容。虽然跨多个页面重复的内容可以放在header、section或任何其他元素中，但元素是为特定页面的特定和惟一的内容保留的。因此，在HTML 5.2之前，元素必须在页面的DOM中是唯一有效的。

然而，随着单页应用程序的流行，坚持这个规则可能会很困难。因为在DOM中可能有多个元素，但是在任何给定的时间内只有一个被显示给用户。

在HTML 5.2当中，我们现在可以在文档中同时存在多个元素，只要在任何给定的时间内只对用户可见一个。任何额外的元素必须使用hidden属性进行隐藏。

我们知道，有好多种利用CSS来隐藏元素的方法。但是，多余的元素必须使用hidden属性进行隐藏。其他隐藏元素的方法，如display:none;或者visibility: hidden;将不再有效。

中的样式

通常情况下，行内CSS属性会被定义在HTML文档的标签内。随着组件化开发模式的发展，开发人员已经看到了把样式写在和他们相关的HTML元素内的好处。

在HTML 5.2当中，现在可以将代码片段放置到标签的任何位置。这以为着我们可以把样式到更接近与需要他的地方。

但是，需要注意的是，为了提高页面的性能，我们最好应该将样式写在元素中。规范中提到：

我们最好将样式都写在文档的头部。在样式写在body内很可能会触发浏览器的样式重新计算、重新布局、或者导致页面重绘。因此我们要谨慎使用。

还需要注意的是，在上面的例子代码中，样式是全局的（没有scoped）。在接下来的代码中，如果定义了其他的行内样式的话，也会应用到前面的元素上，这也就是为什么他会触发重绘。

在中使用标题元素

在表单中，元素代表在一个元素内表单字段的标题。在HTML 5.2之前，元素内只可以使用纯文本。现在，我们可以在其中使用标题元素了。

当我们想要使用fieldset元素对表单的不同部分进行分组时，你就会发现这个真心有用。在这样的情况下，使用标题元素是很有意义的，这将使得用户更方便地通过文档大纲来定位表单。

移除的特性

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

keygen:用于帮助生成表单的公钥。

menu和menuitem: 用于创建导航或上下文菜单。

新添加的无效实践

最后，一些开发实践已经宣判失效。

元素不再有内联的、浮动的、或者块级子节点。

在HTML 5.2中，

元素唯一有效的子节点应该是措辞内容（phrasing content）。这意味着不应该在段落内嵌套以下类型的元素：

行内块元素

行内表格

浮动的、或者绝对定位的块元素

不再有严格的Doctype

最后，我们可以对以下严格的文件类型说再见: