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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180123G04W0N00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券