HTML5.2的新特性

  2018-01-13 14:03

原文:What’s New in HTML 5.2?

不到一个月以前,HTML5.2成为了官方的W3C标准(REC)。一个版本到了REC阶段,意味着它得到了W3C成员和负责人的正式认可,W3C官方正式推荐浏览器部署,并让web页面制作者使用。

在REC阶段,每一个新特性至少有两个独立实现。这使得我们网页开发者有充足的时间开始部署新特性。

HTML5.2有大量的新增和移除特性,这些特性在官方的HTML5.2的变化页面里都能看得到。这篇文章将着重阐述那些我认为对我的开发影响最大的那些变化。

新的特性

原生的<dialog>元素

在所有HTML5.2的变化里,最让我感到激动是对<dialog>元素的介绍,一个原生的对话框。对话框在web界非常流行,目前每一个对话框的实现在某些方面都有所不同。对话框很难做到无障碍性,这使得网页上的对话框对那非视觉性地使用网页的人群没有实际价值。

新的<dialog>元素致力于解决这个困境,它提供了使用对话模拟框的简便方法,不用再担心那些陷阱。我将写一篇详细的文章分别阐述这个元素是如何工作的,这里只是一些基础的内容。

对话框通过一个<dialog>标签创建:

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

在添加open属性之前,对话框默认在视觉上是被隐藏掉的(DOM里也是)。

这个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的<dialog>元素则有缺陷。

在iFrame中使用支付请求API

支付请求API是付款表单原生的替代品。为了给在线上用户提供标准化一致的支付方法,它把对获取用户支付信息的控制从每个网站自己的支付表单转移到了浏览器上。

在HTML5.2之前,这些支付请求不能通过页面文档内嵌的iframe实现。这使得第三方支付(如Stripe、Paystack)用不了这个API,这些第三方支付接口一般都是通过iframe调用的。

HTML5.2介绍了allowpaymentrequest属性。在iframe上添加这个属性将允许用户在主网页使用支付请求API。

<iframe allowpaymentrequest>

苹果Icon的大小

网页的icon用页面头部的<link rel="icon">定义,sizes属性用来定义不同大小的icon。

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

基于多数不同设备都有自己不同的“可选的”icon大小,如果有多个大小可以选择,这个属性可以让浏览器选择用哪个,虽说这只是建议性的。

在HTML5.2之前,sizes属性只在icon的引入可用。但苹果的IOS设备不支持这个属性。为了回避这个事实,苹果介绍了一个特殊的引用apple-touch-icon,用于定义苹果设备专用的icon。

HTML5.2的特性让sizes属性不局限于icon的引用,apple-touch-icon也可以使用。尽管据我目前所知,苹果设备仍旧不支持sizes属性,当他们最终支持的时候,这个变化将会很有用。

新合理化的惯例

除了新特性外,HTML5.2也让一些从前不规范的HTML写法合法化。

多个<main>元素

<main>元素代表着网页的主体部分。header、section及其他元素里的内容都会在不同的页面有重复,而<main>元素是保留给某个特殊页面独一无二的内容的。结果是在HTML5.2之前,页面的<main>元素必须是单独的才能在DOM中有效。

随着单页面应用的流行,这个规则很难保持下去。许多情况下都会出现一个DOM多个<main>元素的情况,但特定的时间只有一个是呈现给用户的。

在HTML5.2中可以有多个<main>元素,只要特定时间只有一个是可见的。其他的<main>元素必须有hidden属性。

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

据我们所知,通过CSS隐藏元素有多种方法。但额外的<main>必须通过hidden属性来隐藏。其他的像display: none;visibility: hidden;都将无效。

<body>里的样式

通常用<style>元素定义的CSS都是写在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>

不过基于显示原因,还是建议将样式预定义在<head>里。根据下面这条规范:

样式元素应该预定义在文档的头部,body中的样式可能会导致样式被覆盖,触发布局的改动或导致页面重新渲染,应当小心尝试。

此外值得一提的是,像例子中的样式一样,它没有作用域。即使是在HTML文档后被内联定义的样式也会对它之前的元素生效,这是它会导致页面重新渲染的原因。

标题放在<legend>里

对表单而言,<legend>是在<fieldset>里等同于form区域里的caption一样的存在。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元素来包裹是有用的。类似的例子里使用标题元素完全说得通,它可以通过文档大纲让这些表单的部分更容易导航给用户。

被删除的特性

HTML5.2移除了一些元素:

  • keygen: 用于帮助表单创建公开key。
  • menumenuitem:用于创建导航和上下文菜单。

被否定的惯例

最后也有一些开发的惯例写法被否定了。

<p>标签不再有内联的,浮动的,或是区块的子元素

HTML5.2以后的<p>的子元素将只能是内容。这意味着下面这几种元素都不能放在段落里:

  • 内联区块
  • 内联表格
  • 浮动的和带有position属性的区块

ERl:这里的说法有点奇怪,像<span>一样的内联肯定是合法的。

不需要严格的文档声明了

我们终于可以和这种严格的文档声明说再见了:

<!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">
你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。