[譯]What's New in HTML 5.2

時間 2019-11-17

標籤 what's new html 5.2 欄目 HTML 简体版

原文原文鏈接

原文地址:bitsofco.de/whats-new-i…

原文做者:Ire Aderinokun

不到一個月前，HTML 5.2 成爲 W3C 官方推薦標準 (REC) 。當規範達到 REC 階段時，這標誌着它已經獲得 W3C 成員和主管的正式承認，W3C 正式建議由用戶代理部署規範，由 Web 開發者實現規範。
在 REC 階段，任何新事物都應該至少有兩個獨立的實現。做爲 Web 開發者，如今正是開始實踐新特性的好時機。
在HTML 5.2 中，有許多添加和刪除，全部這些均可以在官方的HTML 5.2 更改頁面上看到。在本文中，我將回顧一些我認爲對個人開發影響最大的更改。
html

新特性

<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 均可以使用這些方法。bash

<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 瀏覽器也開始標記了。
app

使用來自 iFrames 的支付請求 API

支付請求 API 是一種新的方案對於表單。目的是爲使用網頁支付的用戶提供一種標準的一致的方法，經過將檢索支付信息的處理移動到瀏覽器而代替每一個網站上的我的付款表單。
在HTML5.2 發佈以前，支付需求是不能被嵌入到 iFrames 裏的。這使得第三方嵌入式支付解決方案(如 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 以前，只有連接關係爲圖標時，Sizes 屬性纔有效。而且，蘋果的 IOS 系統不支持 Sizes 屬性。爲了解決這個問題，蘋果介紹了一種專門命令，apple-touch-icon，能夠用來定義在他們設備上使用的圖標。
在HTML5.2 中，若是是 apple-touch-icon，如今是容許使用 Sizes 屬性，不在僅限於 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;或者visibility:hidden;都是無效的。
佈局

在<body>中的樣式

典型地，CSS 須要寫在<style>裏而且放在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>
複製代碼

然而，在性能方面，仍須要注意 Style 仍是放在<head>裏比較好。根據如下規範，性能

最好在文檔的頭部使用樣式元素。在文檔主體中使用樣式可能會致使從新設計樣式、觸發佈局和/或再次生效，所以應該謹慎使用。
網站

還應該注意的是，如示例所示，樣式沒有限定範圍。在 HTML 文檔中定義的內聯樣式仍然適用於在它以前定義的元素，這就是它可能觸發再次生效的緣由。ui

<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>
複製代碼

當咱們但願使用<fieldset>元素對錶單的不一樣部分進行分組時，這很是有用。像這個例子同樣，使用標題是頗有意義的，這將使依賴於文檔大綱的用戶更容易瀏覽這些表單部分。spa

刪除特性

HTML5.2，一些元素被刪除了，名字是：

kegen：用來生成表單的公鑰
menu 和 menuitem：用來建立導航或文本菜單