HTML5.2新特性解讀
不到一個月之前，W3C官方釋出 HTML5.2，併成為官方推薦使用標準。這意味著作為web開發者，我們可以愉快地使用5.2中的新特性了。
W3C在HTML5.2中添加了一些新特性，也有一些曾經的特性被移出了。這篇文章裡筆者會為大家介紹一下對開發者影響較大的一些更新。
新特性
原生提供<dialog>元素
眾所周知，dialog是web開發中非常常用的一個元件，很多人的前端元件開發之路都是從開發一個dialog開始的。市面上各種框架對dialog的實現各種各樣，用法也有難有易。這次官方對dialog的實現改變了這樣的現狀，使用官方dialog，不必再擔心各種框架實現的陷阱了。
下面演示一下dialog的用法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <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> </body> </html>
注意：dialog預設是隱藏的，必須要顯示宣告為open才能在頁面顯示。也可以像上述程式碼所示，手動觸發dialog的open和close事件。
iFrame可以使用支付請求介面
新版本的規範在 iframe 標籤上新增了一些重要屬性用於支援新的 JavaScript API。其添加了 allowpaymentrequest 屬性以允許 iframe 控制支付請求 API 的訪問。這也意味著嵌入了第三方內容的頁面能夠控制該第三方內容是否可向使用者請求獲取支付憑證，進而讓可嵌入的購物車工具可以利用新的 API。來自 Forrester 的 Brendan Miller 闡述了支付請求 API 所帶來的好處，他說：
該新標準讓開發者可以建立一個簡化的結帳頁面，使用者可以重複使用儲存的付款和地址資訊來加快結賬速度，並減少錯誤輸入。
支付請求 API 已經可在 Chrome、Edge 和技術預覽版的 Safari 中使用。
對main標籤多個使用的支援
在HTML5.2之前，頁面中只能存在一個main標籤，多餘的main標籤將被隱藏。此次5.2的釋出，對多個main提供了支援，開發者需要在頁面中對不需要顯示的main標籤設定hidden屬性，或者使用其他隱藏標籤的方法。
<main>...</main>
<main hidden>...</main>
<main hidden>...</main>允許在body中寫style
HTML5.2 允許將style標籤寫在body標籤中，可以讓樣式與其影響的標籤更貼近，但注意，官方並不推薦這麼做，還是希望開發者將style寫在head裡。
<body>
<p>I’m cornflowerblue!</p>
<style>
p { color: cornflowerblue; }
</style>
<p>I’m cornflowerblue!</p>
</body>移除的特性
在HTML5.2中一些元素被移除了，比如：
- keygen：幫助forms生成公鑰
- menu和menuitem：用來生成導航或者選單
最新的列為無效的實踐
在HTML5.2中，一些以往的實踐也被定義為無效了。
在p標籤中，不再有inline、floated或者blocked
在HTML5.2中，唯一允許作為p標籤子元素的是段落內容。這意味著在p標籤中不再允許出現下面的幾種元素樣式：
- Inline blocks
- Inline tables
- Floated and positioned blocks
不再有嚴格模式的的Doctypes
最後，我們終於可以和下面的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">