原文标题: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中有一个标志。
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
:用于帮助生成表单的公钥menu
和 menuitem
:用于创建导航或上下文菜单最后,一些开发实践已经失效。
<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 闭包 |
小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。