HTML 5.2有什么新功能?

序言

2017年年底,HTML 5.2成为正式的W3C推荐标准(REC),这意味着它已经得到了W3C成员和Director的正式认可,而我们前端苦逼猿也可以运用其中的新功能来开发了。在HTML 5.2中,有一些增加和删除,所有这些都可以在官方的HTML 5.2 Changes页面上看到。在本文中,我将回顾一些我认为比较有意思的变化。

新功能

1.本地dialog元素

在HTML 5.2的所有变化中,最让我兴奋的是引入了Dialog

元素(一个本地对话框)。在这之前,我们都要写大量的代码或者引入三方插件才能实现,并且用起来还可能造成性能减弱,影响整个效果。新的元素旨在改变这一点,提供一种简单的方式来包含模态对话,而不必担心许多缺陷,这里我们简单介绍一下dialog元素。

创建一个简单的dialog对话框:

<dialog>
 <h2>标题</h2>
 <p>对话框的内容</p>
</dialog>

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

<dialog open>

该open属性可以通过调用任何可用的show()和close()方法来切换

<button id="open">打开</button>
<button id="close">关闭</button>

<dialog id="dialog">
  <h2>标题</h2>
  <p>对话框的内容</p>
</dialog>

<script>
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});
</script>

dialog元素已经在Chrome中得到了支持,Firefox也将紧随其后。

2.允许在iFrames中使用Payment Request API

先要告诉大家的是,Payment Request API是一种最新的网页支付标准。

我们都知道,在网页上完成支付操作对用户来说是个冗长的流程,这样会降低网站支付转化率。虽然自动填充可以让用户输入信息更加方便,但是在移动设备上高频率数据输入仍然是一个挑战。Payment Request API允许通过信用卡或者Android Pay在网页上快速、无缝和安全的支付。它还能够在无需输入的情况下,让用户提供账单地址、物流信息和支付信息等内容。
在HTML 5.2之前,支付请求无法通过嵌入在文档中的iframe进行。这使得第三方嵌入式支付解决方案(例如Stripe,Paystack)基本不可能利用Payment Request API,因为它们的支付接口通常是在iframe中处理的。

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

<iframe allowpaymentrequest>

新用法

1.多main元素

main元素代表了网页的主要内容,所以,在HTML5.2之前,main元素在DOM中必须是唯一的,否则是无效的。但是随着单页面应用程序的普及,坚持在DOM仅仅使用一个main已经越来越困难。可能存在DOM中存在多个main元素的情况,但是在任何时间点都只向用户显示其中的一个main元素。
在HTML 5.2规范中,我们可以使用多个main元素,只要在给定的时间内只有一个元素对用户可见即可。任何额外的元素必须使用该hidden属性隐藏。

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

我们都知道,有很多种可以使元素隐藏的方法,但是,main元素必须使用hidden属性来隐藏,任何其他隐藏元素的方法,例如display: none;或visibility: hidden;都不会有效。

2.把style写在body中

通常情况下,使用style定义的内联样式是写在html文档中的head标签里面的,但是随着组件化开发越来越流行,我们通常希望把style直接写在相关的组件里面,用以直观的查看或者修改组件元素的样式。
在HTML5.2中,style定义的内联样式写在body中的任何位置都是有效的,这意味着我们可以使样式更接近他们使用的位置。

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

但是,仍然需要注意到,出于性能原因,最好将样式放置在head中。根据规范:

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

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

3.legend元素中可以使用h标签

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

已删除的功能

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

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

评论已关闭

  1. Ellfluigo

    Clomid C25 Comprar Viagra Cialis Generico cialis Canada Drug Pharmacy Purple Viagra

  2. Kelplaire

    Canadian Viagra On Line Fda Approved Cephalexin Stability Kamagra Jellies viagra How To Order Nympho Max Drugs Prescriptions On Line Viagra Cialis Bayer Buy Cialis Online Pharmacy viagra online pharmacy Ceftin