【译】一些新的东西在HTML5.2中

最新推荐文章于 2023-12-04 20:15:26 发布

西装暴徒_12138

最新推荐文章于 2023-12-04 20:15:26 发布

阅读量318

点赞数

不到一个月，HTML5.2成为W3C官方推荐标准（REC）。当规范达到REC阶段，这意味着它已经得到W3C成员和主管的正式认可，W3C正式建议由用户代理部署规范，由WEB开发者实现规范。
在REC阶段，任何事物都应该至少有两个独立的实现。作为WEB开发者，现在正是开始实践新特性的好时机。
在HTML5.2中，有许多添加和删除，所有这些都可以在官方的HTML5.2更改页面上看到。在本文中，我将回顾一些我认为对我的开发影响最大的更改。

新特性

<dialog> 元素

HTML5.2的所有变化中，最让我兴奋的是关于元素弹出框的介绍。弹出框在web中是很常见的，不同的用途有着不同的实现方法。弹出框也很难以一种可访问的方式来实现，导致网上的很多弹出框几乎是不能用的对于不会操作的用户。
新属性< dialog >改变了这种状况，提供一种简单的方式来实现弹出框，而不必担心许多缺陷。我会在另一篇文章中详细的写一下这个元素如何使用，但我这里我先写一些基础的。

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

默认情况下，这个弹框在视觉上市看不到的，除非使用open属性

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

Dialog 元素被 Chrome 浏览器支持，Firefox浏览器也开始标记了。

使用来自 iFrame 的支付请求API

支付请求 API 是一种新的方案对于表单。目的是为使用网页支付的用户提供一种标准的一致的方案，通过将检索支付信息的处理移动到浏览器而代替每个网站上的个人付款表单。
在HTML5.2发布之前，支付需求是不能被嵌入到iFrame里的。这使得第三方嵌入式支付解决方案（如 Stripe丶paystack）基本上不可能利用这个API，因为他们的支付接口通常要在iframe中处理。
HTML5.2中介绍的 allowpaymentrequest属性，应当用到Iframe时，将允许它在用户位于当前web页面时使用支付请求API。

<iframe allowpaymentrequest>

苹果图标的尺寸

为了去定义网页图标，我们使用<link rel='icon'> 元素在文档的头部。为了定义图标的不同尺寸，我们要使用 Sizes 属性。

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

尽管这个属性纯粹是建议性质，但它允许用户在多个大小可用时决定使用哪个大小的图标，特别是当大多数设备有自己不同的 “最佳” 图标大小。
在HTML5.2之前，只有链接关系为图标时，SIZE属性才有效，并且，苹果的IOS系统不支持Sizes属性。为了解决这个问题，苹果介绍了一种专门命令，apple-touch-icon，现在是允许使用SIzes属性，这个改变对于未来是非常有用的。

最近有效的实践

除了新特性之外，HTML 5.2 还验证了一些无效的HTML 编写实践。

多个< main >元素

< main >元素表示一个网页的主要内容，内容被反复贯穿多个页面放置在头部，节段，或者一些其他的元素，因此，在HTML5.2之前， < main >元素必须在页面DOM中唯一的才是有效的。
在当前单页面应用下，去坚持这个准则是很困难的。这可能导致有多个Main 元素在DOM中，但是只有一个显示给用户。
在HTML5.2中，在标签中可以有多个Main元素，只是一个是对用户可见的。其余的元素会通过hidden属性被隐藏掉。

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

众所周知，css中有很多方式隐藏元素。但是多余的 Main 元素必须使用HIdden元素隐藏。其他隐藏方法，比如： display：none 或者 visibilty：hidden都是无效的。

在< body >中的样式

典型地，CSS 需要写在< style >里并且放在HTML中的在标签里。随着组件化的发展，开发人员已经看到了将样式与相关的 Html 元素一起编写和放置的好处。
在 HTML5.2 中，定义 < style >放在 HTML 中的在< body >里的任何位置都是有效的。这意味着我们可以在更接近使用它们的地方使用样式。

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

然而，在性能方面，仍需要注意 Style 还是放在< head >里比较好。根据以下规范：

最好在文档的头部使用样式元素。在文档主体中使用样式可能会导致重新设计样式、触发布局和/或再次生效，因此应该谨慎使用。

译者语：你在说个屁！！！！！！！！！！！！！！！！！！

还应该注意的是，如示例所示，样式没有限定范围。在 HTML 文档中定义的内联样式仍然适用于在它之前定义的元素，这就是它可能触发再次生效的原因。

译者再语：你又在说个屁！！！！！！！！！！！！！！！！！！

< legend >中的标题

在表单中，< 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>

当我们希望使用< filedset >元素对表单的不同部分进行分组时，这非常有用。像这个例子一样，使用标题是很有意义的，这将使依赖于文档大纲的用户更容易浏览这些表单部分。