HTML 5.2中有些什么新变化?

HTML 5.2中有些什么新变化?

原文标题:What’s New in HTML 5.2? 原文链接:https://bitsofco.de/whats-new-in-html-5-2/ 作者:Ire Aderinokun 翻译:疯狂的技术宅

不到一个月前,HTML 5.2成为W3C官方的推荐标准(REC)。 当一个规范进入REC阶段时,就意味着它已经得到了W3C成员和负责人的正式认可,并且W3C正式把它推荐推荐给用户进行部署,并且由网页开发人员实施。

在REC阶段,任何新的特性应该至少有2个独立的实现。 这对于我们网页开发人员来说是开始实现任何新功能的好时机。

在HTML 5.2中,有一些内容被增减,详情可以在官方的HTML 5.2 Changes页面上看到(https://www.w3.org/TR/html52/changes.html#changes)。 在本文中,我会介绍一些影响到我的变化。

新功能

一个本地的 <dialog> 元素

在HTML 5.2的所有变化中,引入 <dialog>元素(一个本地对话框)是令我最兴奋的事情。 对话框在web上非常流行,但是它们实现方式都有所不同。 对话框也很难做到易于访问,这导致 web 上的大多数对话框实际上无法服务于不以可视形式浏览 web 的用户(译者注:例如为盲人转换为语音)。

新的 <dialog>元素旨在改变这一点,提供了一个简单的方法来包含一个模态对话框,而不必担心很多的缺陷。 我将写一篇关于这个元素是如何工作的单独的,详细的文章,但这里有一些基础知识。

该对话框使用 <dialog>元素创建:

<dialog>  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

默认情况下,除非应用了打开属性,否则该对话框将从视图(并从DOM访问)中隐藏。

<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>

Chrome浏览器中已经有了 <dialog>元素的支持,并且在Firefox中有一个标志。

使用iFrames中的Payment Request API

Payment Request API(https://www.w3.org/TR/payment-request/)是签出表单的本地替代方案。它的目的是提供一个标准化的和一致的方法,使在网上支付的用户,将付款信息的检索操作放到浏览器,而不是在每个网站上去逐个查看自己的账单。

在HTML 5.2之前,这些支付请求不能通过嵌入在文档中的iframe来完成。 这使得第三方嵌入式支付解决方案(例如Stripe,Paystack)基本上不可能利用这个API,因为它们的支付接口通常是在iframe中处理的。

HTML 5.2引入了 allowpaymentrequest属性,该属性应用于iframe时,将允许它在用户处于托管网页时使用Payment Request API。

<iframe allowpaymentrequest>

苹果设备的图标大小

要定义网页图标,我们使用文档头部的 <linkrel=“icon”>元素。 要定义不同大小的图标,可以使用 sizes属性。

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

这个属性虽然纯粹是个建议,但是如果有多个尺寸可用的话, user agents可以决定使用哪个尺寸的图标,特别是当大多数设备都有自己的“最佳”图标尺寸时。

在HTML 5.2之前, sizes属性只有在链接关系是图标时才有效。 但是,Apple的iOS设备不支持 sizes属性。 为了解决这个问题,苹果推出了一个设备专用关系 appple-touch-icon,可以用来定义设备上使用的图标。

在HTML 5.2中,如果关系是 apple-touch-icon,就不再只是图标了,现在规范允许使用 sizes属性。 这将允许我们为不同的苹果设备提供不同大小的图标。 虽然,据我目前所知,苹果设备仍然不支持 sizes属性,但是如果他们愿意的话,这个变化是非常用的。

最新的有效编写方法

除了上述新功能,HTML 5.2还支持了一些以前无效的HTML的编写方法。

多个 <main>元素

<main>元素表示网页的主要内容。 尽管在多个页面上重复的内容可以放置在标题,部分或任何其他元素中,但 <main>元素是为特定页面的特定内容保留的。 因此,在HTML 5.2之前,DOM中的 <main>元素必须是唯一的,才能使页面有效。

然而随着单页应用的普及,坚持这一规则可能是困难的。 在DOM中可能有多个 <main>元素,但是在任何给定的时间只能有一个被显示给用户。

使用HTML5.2,我们现在可以在我们的标记中有多个 <main>元素,只要在给定的时间内只有一个对用户是可见的。 任何额外的元素必须使用隐藏属性隐藏。

<main>...</main>  
<main hidden>...</main>  
<main hidden>...</main>

我们知道,有几种方法可以用CSS隐藏元素。 但是,任何额外的 <main>元素都必须使用 hidden属性来隐藏。 任何其他隐藏该元素的方法,例如 display:none;visibility:hidden; 将失效。

<body>中的样式

通常,使用 <style>元素定义的内联CSS被放置在HTML文档的 <head>内。 随着组件化开发的增加,开发人员已经看到了编写和放置样式以及与其相关的html元素的好处。

在HTML 5.2中,现在HTML文档的 <body>内的任何地方定义了一个嵌入的 <style>块。 这意味着我们可以使风格更接近他们使用的地方。

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

但是,仍然注意到,出于性能原因,样式应该优选地放置在 <head>中。 根据规范,

样式元素应该最好用在文档的头部。 在文档的主体中使用样式可能导致重新设置,触发布局和/或导致重新绘制,因此应该小心使用。

还应该注意的是,如示例所示,样式不在作用域内。 稍后在HTML文档中定义的内联样式仍然适用于之前定义的元素,这就是为什么它可能会触发重绘。

标题在 <legend>

在表单中, <legend>元素表示 <fieldset>中表单字段的标题。 在HTML 5.2之前,图例的内容必须是纯文本。 现在,我们可以包含标题元素。

<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元素来组织表单的不同部分时,这非常有用。 在这种情况下,使用标题是非常有意义的,这使得依赖于文档大纲的用户可以更轻松地导航这些表单部分。

删除的功能

在HTML 5.2中,删除了一些元素,即:

  • keygen:用于帮助生成表单的公钥
  • menumenuitem:用于创建导航或上下文菜单

最近失效的做法

最后,一些开发实践已经失效。

没有内联,浮动或 <p>的块级子元素

在HTML 5.2中, <p>元素的唯一有效子元素应该是短语内容。 这意味着以下类型的元素不应该嵌套在一个段落中:

  • 内联块
  • 内联表
  • 浮动和定位块

没有了严格的文件类型

最后,我们可以告别以下严格的文件类型:

<!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">

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2018-01-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券