【译】What's New in HTML 5.2

原文地址:bitsofco.de/whats-new-i…

原文作者:Ire Aderinokun

不到一个月前，HTML 5.2成为W3C官方推荐标准(REC)。当规范达到REC阶段时，这标志着它已经得到W3C成员和主管的正式认可，W3C正式建议由用户代理部署规范，由web开发者实现规范。
在REC阶段，任何新事物都应该至少有两个独立的实现。作为web开发者，现在正是开始实践新特性的好时机。
在HTML 5.2中，有许多添加和删除，所有这些都可以在官方的HTML 5.2更改页面上看到。在本文中，我将回顾一些我认为对我的开发影响最大的更改。

新特性

<dialog>元素

HTML5.2的所有变化中，最让我兴奋的是关于元素弹出框的介绍，弹出框在web中是很常见的，不同的用途有着不同的实现方法。弹出框也很难以一种可访问的方式来实现，导致网上的很多弹框几乎是不能用的对于不会操作的用户。
新属性<dialog>改变了这种状况，提供一种简单的方式来实现弹出框，而不必担心许多缺陷。我会在另一篇文章中详细的写一下这个元素如何使用，但在这里我先写一些基础的。

 <dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>
复制代码

默认情况下，这个弹框在视觉上是看不到的，除非使用open这个属性

<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>
复制代码

dialog元素被Chrome浏览器支持，Firefox浏览器也开始标记了。

使用来自iFrames的支付请求API

支付请求API是一种新的方案对于表单。目的是为使用网页支付的用户提供一种标准的一致的方法，通过将检索支付信息的处理移动到浏览器而代替每个网站上的个人付款表单。
在HTML5.2发布之前，支付需求是不能被嵌入到iFrames里的。这使得第三方嵌入式支付解决方案(如Stripe、Paystack)基本上不可能利用这个API，因为他们的支付接口通常要在iframe中处理。
HTML5.2中介绍的allowpaymentrequest属性，当应用到iframe时，将允许它在用户位于当前web页面时使用支付请求API。

<iframe allowpaymentrequest>
复制代码

苹果图标的尺寸

为了去定义网页图标，我们使用元素在文档的头部。为了定义图标的不同尺寸，我们要使用sizes属性。

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

尽管这个属性纯粹是建议性质，但它允许用户在多个大小可用时决定使用哪个大小的图标，特别是当大多数设备都有自己不同的“最佳”图标大小。
在HTML5.2之前，只有链接关系为图标时，size属性才有效。并且，苹果的ios系统不支持sizes属性。为了解决这个问题，苹果介绍了一种专门命令，apple-touch-icon，可以用来定义在他们设备上使用的图标。
在HTML5.2中，如果是apple-touch-icon，现在是允许使用size属性，不在仅限于icon。这就允许我们对不同的苹果设备提供不同尺寸的图标。尽管苹果设备不能直接支持sizes属性，这个改变对于未来是非常有用的。

最近有效的实践

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

多个<main>元素

<main>元素表示一个网页的主要内容，内容被反复贯穿多个页面放置在头部，节段，或者一些其他的元素，<main>元素是被保留在特定和唯一的页面的内容里。因此，在HTML5.2之前，<main>元素必须在页面DOM中是唯一的才是有效的。<main>元素表示一个网页的主要内容，内容被反复贯穿多个页面放置在头部，节段，或者一些其他的元素，<main>元素是被保留在特定和唯一的页面的内容里。因此，在HTML5.2之前，<main>元素必须在页面DOM中是唯一的才是有效的。
在当前单页面应用下，去坚持这个准则是很困难的。这可能导致有多个main元素在DOM中，但是只有一个显示给用户。
在HTML5.2中，在标签中可以有多个main元素，只有一个是对用户可见的。其余的元素会通过hidden属性被隐藏掉。

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>
复制代码

众所周知，CSS中有很多方式隐藏元素。但是多余的main元素必须使用hidden元素隐藏。其它隐藏方法，比如：display:none;或者visibility:hidden;都是无效的。

在<body>中的样式

典型地，CSS需要写在在<style>里并且放在HTML中的在<head>标签里。随着组件化的发展，开发人员已经看到了将样式与相关的html元素一起编写和放置的好处。
在HTML5.2中，定义<style>放在HTML中的在<body>里的任何位置都是有效的。这意味着我们可以在更接近使用它们的地方使用样式。

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

然而，在性能方面，仍需要注意style还是放在<head>里比较好。根据以下规范，

最好在文档的头部使用样式元素。在文档主体中使用样式可能会导致重新设计样式、触发布局和/或再次生效，因此应该谨慎使用。

还应该注意的是，如示例所示，样式没有限定范围。在HTML文档中定义的内联样式仍然适用于在它之前定义的元素，这就是它可能触发再次生效的原因。

<legend>中的标题

在表单中，<legend>元素表示<fieldset>中的表单字段的标题。在HTML5.2之前，legend的内容必须是纯文本。现在，可以包括标题元素。

<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>元素对表单的不同部分进行分组时，这非常有用。像这个例子一样，使用标题是很有意义的，这将使依赖于文档大纲的用户更容易浏览这些表单部分。

删除特性

HTML5.2，一些元素被删除了，名字是：

kegen：用来生成表单的公钥
menu 和 menuitem：用来创建导航或文本菜单