HTML 5.2 新特性介紹
本文譯自 What』s New in HTML 5.2?
作者 Ire Aderinokun，是一位前端開發者和 UI 設計師。
就在不到一個月之前，HTML 5.2 成為了 W3C 的官方推薦規範（REC），這意味著它得到了來自 W3C 主席及其成員的官方支持，W3C 組織將正式向瀏覽器廠商和 web 開發者推薦應用這一規範。
在 REC 階段之前，規範中的每一個新特性都應當已經有了至少兩個獨立實現。所以對於我們這些 web 開發者來說，現在已經可以開始實際應用這些新特性了。
要了解 HTML 5.2 中的所有變化之處，可以閱讀這份官方的文檔。在這篇文章里，我會梳理一下我認為我的開發工作影響比較大的變化。
新特性原生的 元素
在 HTML 5.2 的所有變化里我感到最為激動的就是引入了 元素，實現了瀏覽器原生的對話框。對話框在 web 開發中非常常見，但是現在每個實現都不太一樣。另一方面，實現一個支持無障礙化的對話框很難，實際上，現在 web 上使用的大多數對話框對於視覺障礙人士來說都是難以使用的。
新引入的
首先，使用
默認情況下，對話框是不可見的，除非你設置了open屬性。
open屬性可以通過 HTMLDialogElement上的 show()和close()方法來改變。
目前，Chrome 已經支持了 元素，而在 Firefox 中可以通過配置打開這一特性。具體情況可以查看 https://caniuse.com/#feat=dialog。
在 iframe 里使用支付請求 API
支付請求 API 是由瀏覽器原生提供支付方式，旨在為用戶在 web 上進行支付提供一個標準而且一致的方法。它讓瀏覽器提供統一一致的界面來搜集用戶的支付信息，而不是讓用戶填寫各個網站自己的支付表單。
在 HTML 5.2 之前，支付請求 API 不能在 iframe 中 使用。這使得那些第三方提供的嵌入式支付解決方案（例如 Stripe、Paystack）完全無法利用這個 API，因為它們的支付介面都是需要在一個 iframe 中進行處理的。
HTML 5.2 為 iframe 引入了一個 屬性，設置這個屬性就可以允許 iframe 中使用支付請求 API 了。
為蘋果設備定義不同尺寸的圖標
通過在 HTML 文檔的頭部使用 ，我們可以定義網頁的圖標。同時，還可以使用 屬性來定義多個不同尺寸的圖標。
雖然這個定義完全是建議性的，但它允許瀏覽器來自主決定使用哪個圖標。尤其是像現在大多數設備的最優圖標尺寸都不一樣，只有瀏覽器自己才知道怎樣的圖標尺寸更為合適。
在 HTML 5.2 以前， 屬性僅僅當 標籤的 屬性為 時才視為有效。可是，蘋果的 iOS 設備並不支持這種 屬性，它引入了一個私有的 rel 值 ，用於定義網頁在蘋果設備上的圖標。
在 HTML 5.2 中，規範的這一限制被去除，當 為 或 時都可以使用 屬性。
新的有效寫法
除了引入一些新特性，HTML 5.2 中也把一些之前被規範認為無效的 HTML 寫法變成有效。
多個 元素
元素用於表達網頁的主體內容。對於在多個網頁中會反覆出現的內容，我們可以把它們放在 header、section 或者別的元素中，但 元素是被設計用於專門放置頁面上特定且唯一的內容的。因此，在 HTML 5.2 之前，規範要求
元素在頁面的 DOM 結構中只能出現一次。
可是隨著單頁應用的流行，我們難以再去堅持這一準則。可以設想會有這樣一種情況：DOM 中有需要有多個 元素，但在同一時間用戶只會看到其中一個。
在 HTML 5.2 中，現在只要能保證用戶同時只能看到一個 元素，我們就可以在頁面中多次使用這個標籤。其它不顯示的 元素必須通過 hidden 屬性設置為隱藏。
我們都很清楚利用 CSS 有多種辦法可以隱藏元素。可是對於頁面上的多個 元素，我們必須用 hidden 屬性將目前不需要顯示的元素進行隱藏。任何別的方法，比如 或者 ，都會被規範認為是無效的。
在 中定義樣式
一般情況下，我們都會使用 標籤來定義內聯 CSS，並將其放置在 HTML 文檔的 中。但隨著組件化開發的興起，開發者們開始逐漸傾向於把樣式定義和與之相關的 HTML 元素放在一起。
在 HTML 5.2 中，在 中的任何地方都可以定義 塊，規範現在將其也視為有效。也就是說我們現在可以讓樣式定義就出現在樣式被使用的地方。
可是仍然需要注意的是，從性能角度考慮，樣式定義最好還是放在 中。規範中也提到：
在文檔的頭部使用樣式元素是一種更為可取的做法。在文檔體內使用樣式可能會導致頁面樣式重排、觸發重新布局或（和）重繪，因此應該謹慎使用這一方式。
還應當注意的是，像在上面這個例子中，樣式定義仍然是作用於全局的。在 HTML 文檔內出現的樣式定義仍然會應用於在其前面的元素之上，這也是它會造成重繪的原因。
在 內使用 h# 標籤
用於在表單中表示一個 的標題。在 HTML 5.2 之前， 中的內容只能使用純文本，現在我們可以在其中使用 h# 標籤。
當我們想使用 來為表單中不同部分進行分組時，這一用法非常有用。就像上面這個例子，使用 h# 標籤可以讓那些依賴於文檔大綱視圖進行導航的用戶更為方便地跳轉到這些表單分組區域。
被移除的特性
在 HTML 5.2 中，有些特性被移除了，包括：
TAG:大前端工程師 |