HTML 5.2 有哪些新內容？
- 原文地址：What’s New in HTML 5.2?
- 原文做者：bitsofco
- 譯文出自：掘金翻譯計劃
- 本文永久連接：github.com/xitu/gold-m…
- 譯者：lsvih
- 校對者：Raoul1996, 吃土小2叉
HTML 5.2 有哪些新內容？
就在不到一個月前，HTML 5.2 正式成爲了 W3C 的推薦標準（REC）。當一個規範到達 REC 階段，就意味着它已經正式獲得了 W3C 成員和理事長的承認。而且 W3C 將正式推薦瀏覽器廠商部署、web 開發者實現此規範。css
在 REC 階段有個原則叫作「任何新事物都至少要有兩種獨立的實現」，這對於咱們 web 開發者來講是一個實踐新特性的絕佳機會。html
在 HTML 5.2 中有一些添加和刪除，具體改變能夠參考官方的 HTML 5.2 變更內容網頁。本文將介紹一些我認爲與個人開發有關的改動。前端
新特性
原生的 <dialog> 元素
在 HTML 5.2 的全部改動中，最讓我激動的就是關於 <dialog> 元素這個原生對話框的介紹。在 web 中，對話框比比皆是，可是它們的實現方式都各有不一樣。對話框很難實現可訪問性，這致使大多數的對話框對那些不方便以視覺方式訪問網頁的用戶來講都是不可用的。html5
新的 <dialog> 元素旨在改變這種情況，它提供了一種簡單的方式來實現模態對話框。以後我會單獨寫一篇文章專門介紹這個元素的工做方式，在此先簡單介紹一下。android
由一個 <dialog> 元素建立對話框：ios
<dialog>
<h2>Dialog Title</h2>
<p>Dialog content and other stuff will go here</p>
</dialog>
複製代碼
默認狀況下，對話框會在視圖中（以及 DOM 訪問中）隱藏，只有設置 open 屬性後，對話框纔會顯示。git
<dialog open>
複製代碼
open 屬性能夠經過調用 show() 與 close() 方法開啓或關閉，任何 HTMLDialogElement 均可以調用這兩個方法。github
<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）。web
上圖爲 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。
- 1. [譯] Vue Devtools 4.0 有哪些新內容
- 2. Html 中行內元素有哪些？塊級元素有哪些？
- 3. Html中行內元素有哪些？塊級元素有哪些？
- 4. 一、HTML5新增了哪些內容或API，使用過哪些?
- 5. HTML5新增了哪些內容或API，使用過哪些?
- 6. 1、HTML5新增了哪些內容或API，使用過哪些?
- 7. NIO系統都有哪些內容?
- 8. Python的優點有哪些 Python編程要學哪些內容
- 9. 什麼是內容電商，內容電商平臺有哪些？
- 10. iOS 11 正式版發佈，都有哪些新內容？
- 更多相關文章...
- • NoSQL數據庫有哪些？ - NoSQL教程
- • NoSQL數據庫的優勢有哪些？ - NoSQL教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。