本文首发于知乎,可以通过点击文章底部的阅读全文来访问知乎原地址。
原文作者: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中,删除了一些元素,即:
新添加的无效实践
最后,一些开发实践已经宣判失效。
<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">