[译]What's New in HTML 5.2

时间 2019-11-17

标签 what's new html 5.2 栏目 HTML 繁體版

原文原文链接

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

原文做者:Ire Aderinokun

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

新特性

<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 均可以使用这些方法。bash

<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 浏览器也开始标记了。
app

使用来自 iFrames 的支付请求 API

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

<iframe allowpaymentrequest>
复制代码

苹果图标的尺寸

为了去定义网页图标，咱们使用 <link rel='icon'> 元素在文档的头部。为了定义图标的不一样尺寸，咱们要使用 Sizes 属性。

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

尽管这个属性纯粹是建议性质，但它容许用户在多个大小可用时决定使用哪一个大小的图标，特别是当大多数设备都有本身不一样的“最佳”图标大小。
在 HTML5.2 以前，只有连接关系为图标时，Sizes 属性才有效。而且，苹果的 IOS 系统不支持 Sizes 属性。为了解决这个问题，苹果介绍了一种专门命令，apple-touch-icon，能够用来定义在他们设备上使用的图标。
在HTML5.2 中，若是是 apple-touch-icon，如今是容许使用 Sizes 属性，不在仅限于 icon。这就容许咱们对不一样的苹果设备提供不一样尺寸的图标。尽管苹果设备不能直接支持 Sizes 属性，这个改变对于将来是很是有用的。
组件化

最近有效的实践

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

多个<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 文档中定义的内联样式仍然适用于在它以前定义的元素，这就是它可能触发再次生效的缘由。ui

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

删除特性

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

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