HTML 5.2 有哪些新內容？

lsvih發表於2018-01-16
HTML

HTML 5.2 有哪些新內容？

就在不到一個月前，HTML 5.2 正式成為了 W3C 的推薦標準（REC）。當一個規範到達 REC 階段，就意味著它已經正式得到了 W3C 成員和理事長的認可。並且 W3C 將正式推薦瀏覽器廠商部署、web 開發者實現此規範。

在 REC 階段有個原則叫做“任何新事物都至少要有兩種獨立的實現”，這對於我們 web 開發者來說是一個實踐新特性的絕佳機會。

在 HTML 5.2 中有一些新增和刪除，具體改變可以參考官方的 HTML 5.2 變動內容網頁。本文將介紹一些我認為與我的開發有關的改動。

新特性

原生的 <dialog> 元素

在 HTML 5.2 的所有改動中，最讓我激動的就是關於 <dialog> 元素這個原生對話方塊的介紹。在 web 中，對話方塊比比皆是，但是它們的實現方式都各有不同。對話方塊很難實現可訪問性，這導致大多數的對話方塊對那些不方便以視覺方式訪問網頁的使用者來說都是不可用的。

新的 <dialog> 元素旨在改變這種狀況，它提供了一種簡單的方式來實現模態對話方塊。之後我會單獨寫一篇文章專門介紹這個元素的工作方式，在此先簡單介紹一下。

由一個 <dialog> 元素建立對話方塊：

<dialog>  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>  
複製程式碼

預設情況下，對話方塊會在檢視中（以及 DOM 訪問中）隱藏，只有設定 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>  
複製程式碼

目前，Chrome 瀏覽器已經支援 <dialog> 元素，Firefox 也即將支援（behind a flag）。

HTML 5.2 有哪些新內容？

上圖為 caniuse.com 關於 dialog 特性主流瀏覽器相容情況的資料

在 iFrame 中使用 Payment Request API（支付請求 API）

Payment Request API 是支付結算表單的原生替代方案。它將支付資訊置於瀏覽器處理，用來代替之前各個網站各不相同的結算表單，旨在為使用者提供一種標準、一致的支付方式。

在 HTML 5.2 之前，這種支付請求無法在文件嵌入的 iframe 中使用，導致第三方嵌入式支付解決方案（如 Stripe, Paystack）基本不可能使用這個 API，因為它們通常是在 iframe 中處理支付介面。

為此，HTML 5.2 引入了用於 iframe 的 allowpaymentrequest 屬性，允許使用者在宿主網頁中訪問 iframe 的 Payment Request API。

<iframe allowpaymentrequest>  
複製程式碼

蘋果的圖示尺寸

如要定義網頁圖示，我們可以在文件的 head 中使用 <link rel="icon"> 元素。如果要定義不同尺寸的圖示，我們可以使用 sizes 屬性。

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

這個屬性雖然純粹是個建議，但如果提供了多種尺寸的圖示，可以讓使用者代理（UA）決定使用哪種尺寸的圖示。在大多數裝置有著不同的“最佳”圖示尺寸時尤為重要。

在 HTML 5.2 之前，sizes 屬性僅能用於 rel 為 icon 的 link 元素中。然而，蘋果的 iOS 裝置不支援 sizes 屬性。為了解決這個問題，蘋果自己引入了一個他們裝置專用的 rel appple-touch-icon 用於定義他們裝置上使用的圖示。

在 HTML 5.2 中，規範定義了 sizes 屬性不再僅僅可用於 rel 為 icon 的元素，也能用於 rel 為 apple-touch-icon 的元素。這樣可以讓我們為不同的蘋果裝置提供不同尺寸的圖示。不過直到現在為止，據我所知蘋果的裝置還是不支援 sizes 屬性。在將來蘋果最終支援此規範時，它將派上用場。

新的有效實踐

除了新特性之外，HTML 5.2 還將一些之前無效的 HTML 寫法認定為有效。

多個 <main> 元素

<main> 元素代表網頁的主要內容。雖然不同網頁的重複內容可以放在 header、section 或者其它元素中，但 <main> 元素是為頁面上的特定內容保留的。因此在 HTML 5.2 之前，<main> 元素在 DOM 中必須唯一才能令頁面有效。

隨著單頁面應用（SPA）的普及，要堅持這個原則變得困難起來。在同一個網頁的 DOM 中可能會有多個 <main> 元素，但在任意時刻只能給使用者展示其中的一個。

使用 HTML 5.2，我們只要保證同一時刻只有一個 <main> 元素可見，就能在我們的標籤中使用多個 <main> 元素。與此同時其它的 <main> 元素必須使用 hidden 屬性進行隱藏。

<main>...</main>  
<main hidden>...</main>  
<main hidden>...</main>  
複製程式碼

我們都知道，通過 CSS 來隱藏元素的方法有很多，但多餘的 <main> 元素必須使用 hidden 屬性進行隱藏。任何其它隱藏此元素的方法（如 display: none; 和 visibility: hidden;）都將無效。

在 <body> 中寫樣式

一般來說，使用<style>元素定義的內聯 CSS 樣式會放置在 HTML 文件的 <head> 中。隨著元件化開發的流行，開發者已經發現編寫 style 並放置在與其相關的 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> 中。參見 規範，

樣式元素最好用於文件的 head 中。在文件的 body 中使用樣式可能導致重複定義樣式，觸發重佈局、導致重繪，因此需要小心使用。

此外還應該注意的是如示例所示，樣式不存在作用域。後來在 HTML 文件中定義的內聯樣式仍然會應用於之前定義的元素，所以它可能會觸發重繪。

<legend> 中的標題元素

在表單中，<legend> 元素表示 <fieldset> 表單域中的標題。在 HTML 5.2 前，legend 元素的內容必須為純文字。而現在，它可以包含標題元素（<h1>等）了。

<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> 元素中唯一合法的子元素只能是文字內容。這也意味著以下型別的元素不再能巢狀於段落標籤 <p> 內：

  • 行內塊（Inline blocks）
  • 行內表格（Inline tables）
  • 浮動塊與固定位置塊

不再支援嚴格文件型別（Strict Doctypes）

最後，我們終於可以和這些文件型別說再見了！

<!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">  
複製程式碼

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章