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/
新特性
原生的<dialog>元素
在HTML 5.2的所有变更中，最让我兴奋的是<dialog>元素的引入——一个原生的对话框。对话框在web上已经非常流行，但是每个实现都或多或少的存在着差异。对话框也非常难以用一种可访问的方式实现，这导致web上的大多数对话框对于那些视觉障碍者来说是无法使用的。
新的<dialog>元素旨在改变这一点，提供了一个简单的方法来包含一个模态对话框，而不必担心许多陷阱。我将会单独写一篇关于这个元素如何工作的详细文章，但是本文只讲一些基础知识。
对话框通过使用<dialog>元素来创建：
默认情况下，对话框是默认不显示的（DOM也是不可访问的），除非你使用open属性。
open属性可以通过调用show()和close()方法来切换，该方法可用于任何HTMLDialogElement。
<dialog>元素已经在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支持多个尺寸
想要定义一个页面的图标，我们可以在文档的头部添加<link rel="icon">元素。
虽然这个属性是纯建议性的，但允许各浏览器决定是否可以使用多个大小的图标，这主要是因为大多数设备都有自己的“最优”图标尺寸。
在HTML 5.2之前，只有当链接关系为图标时，size属性才有效。然而，苹果的iOS设备并不支持尺寸属性。为了解决这个问题，苹果公司推出了一种设备专用的关系—— apppl -touch-icon，可以用来定义设备上使用的图标。
在HTML 5.2中，规范现在允许apple-touch-icon使用sizes属性了，不再仅仅适用于icon了。这将允许我们为不同的苹果设备提供不同尺寸的图标。尽管，据我目前所知，苹果设备仍然不支持sizes属性，不过这一变化会对将来是有积极作用的。
新添加的有效实践
除了新特性之外，HTML 5.2还启用了一些以前无效的HTML编写实践。
复数的<main>元素
<main>元素表示web页面的主要内容。虽然跨多个页面重复的内容可以放在header、section或任何其他元素中，但<main>元素是为特定页面的特定和惟一的内容保留的。因此，在HTML 5.2之前，<main>元素必须在页面的DOM中是唯一有效的。
然而，随着单页应用程序的流行，坚持这个规则可能会很困难。因为在DOM中可能有多个<main>元素，但是在任何给定的时间内只有一个被显示给用户。
在HTML 5.2当中，我们现在可以在文档中同时存在多个<main>元素，只要在任何给定的时间内只对用户可见一个。任何额外的元素必须使用hidden属性进行隐藏。
我们知道，有好多种利用CSS来隐藏元素的方法。但是，多余的<main>元素必须使用hidden属性进行隐藏。其他隐藏元素的方法，如display:none;或者visibility: hidden;将不再有效。
<body>中的样式
通常情况下，行内CSS属性会被定义在HTML文档的<head>标签内。随着组件化开发模式的发展，开发人员已经看到了把样式写在和他们相关的HTML元素内的好处。
在HTML 5.2当中，现在可以将<style>代码片段放置到<body>标签的任何位置。这以为着我们可以把样式到更接近与需要他的地方。
但是，需要注意的是，为了提高页面的性能，我们最好应该将样式写在<head>元素中。规范中提到：
我们最好将样式都写在文档的头部。在样式写在body内很可能会触发浏览器的样式重新计算、重新布局、或者导致页面重绘。因此我们要谨慎使用。
还需要注意的是，在上面的例子代码中，样式是全局的（没有scoped）。在接下来的代码中，如果定义了其他的行内样式的话，也会应用到前面的元素上，这也就是为什么他会触发重绘。
在<legend>中使用标题元素
在表单中，<legend>元素代表在一个<fieldset>元素内表单字段的标题。在HTML 5.2之前，<legend>元素内只可以使用纯文本。现在，我们可以在其中使用标题元素了。
当我们想要使用fieldset元素对表单的不同部分进行分组时，你就会发现这个真心有用。在这样的情况下，使用标题元素是很有意义的，这将使得用户更方便地通过文档大纲来定位表单。
移除的特性
在HTML 5.2中，删除了一些元素，即:
- keygen:用于帮助生成表单的公钥。
- menu和menuitem: 用于创建导航或上下文菜单。
新添加的无效实践
最后，一些开发实践已经宣判失效。
<p>元素不再有内联的、浮动的、或者块级子节点。
在HTML 5.2中，<p>元素唯一有效的子节点应该是措辞内容（phrasing content）。这意味着不应该在段落内嵌套以下类型的元素：
- 行内块元素
- 行内表格
- 浮动的、或者绝对定位的块元素
不再有严格的Doctype
最后，我们可以对以下严格的文件类型说再见:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">