【譯】What's New in HTML 5.2

HTML · 發表 2019-02-20 15:25:34

摘要：原文地址:bitsofco.de/whats-new-i… 原文作者:Ire Aderinokun 不到一個月前，HTML 5.2成為W3C官方推薦標準(REC)。當規範達到REC階段時，這標誌著它已經得到W3C成員和主管的正式認可，W...

原文地址:bitsofco.de/whats-new-i…
原文作者:Ire Aderinokun

不到一個月前，HTML 5.2成為W3C官方推薦標準(REC)。當規範達到REC階段時，這標誌著它已經得到W3C成員和主管的正式認可，W3C正式建議由使用者代理部署規範，由web開發者實現規範。

在REC階段，任何新事物都應該至少有兩個獨立的實現。作為web開發者，現在正是開始實踐新特性的好時機。

在HTML 5.2中，有許多新增和刪除，所有這些都可以在官方的HTML 5.2更改頁面上看到。在本文中，我將回顧一些我認為對我的開發影響最大的更改。

新特性

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

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

使用來自iFrames的支付請求API

支付請求API是一種新的方案對於表單。目的是為使用網頁支付的使用者提供一種標準的一致的方法，通過將檢索支付資訊的處理移動到瀏覽器而代替每個網站上的個人付款表單。

在HTML5.2釋出之前，支付需求是不能被嵌入到iFrames裡的。這使得第三方嵌入式支付解決方案(如Stripe、Paystack)基本上不可能利用這個API，因為他們的支付介面通常要在iframe中處理。

HTML5.2中介紹的allowpaymentrequest屬性，當應用到iframe時，將允許它在使用者位於當前web頁面時使用支付請求API。

<iframe allowpaymentrequest>
複製程式碼

蘋果圖示的尺寸

為了去定義網頁圖示，我們使用元素在文件的頭部。為了定義圖示的不同尺寸，我們要使用sizes屬性。

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

儘管這個屬性純粹是建議性質，但它允許使用者在多個大小可用時決定使用哪個大小的圖示，特別是當大多數裝置都有自己不同的“最佳”圖示大小。

在HTML5.2之前，只有連結關係為圖示時，size屬性才有效。並且，蘋果的ios系統不支援sizes屬性。為了解決這個問題，蘋果介紹了一種專門命令，apple-touch-icon，可以用來定義在他們裝置上使用的圖示。

在HTML5.2中，如果是apple-touch-icon，現在是允許使用size屬性，不在僅限於icon。這就允許我們對不同的蘋果裝置提供不同尺寸的圖示。儘管蘋果裝置不能直接支援sizes屬性，這個改變對於未來是非常有用的。

最近有效的實踐

除了新特性之外，HTML 5.2還驗證了一些以前無效的HTML編寫實踐。

多個<main>元素

<main>元素表示一個網頁的主要內容，內容被反覆貫穿多個頁面放置在頭部，節段，或者一些其他的元素，<main>元素是被保留在特定和唯一的頁面的內容裡。因此，在HTML5.2之前，<main>元素必須在頁面DOM中是唯一的才是有效的。<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文件中定義的內聯樣式仍然適用於在它之前定義的元素，這就是它可能觸發再次生效的原因。

<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>元素對錶單的不同部分進行分組時，這非常有用。像這個例子一樣，使用標題是很有意義的，這將使依賴於文件大綱的使用者更容易瀏覽這些表單部分。

刪除特性

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

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

【譯】What's New in HTML 5.2

新特性

<dialog>元素

使用來自iFrames的支付請求API

蘋果圖示的尺寸

最近有效的實踐

多個<main>元素

在<body>中的樣式

<legend>中的標題

刪除特性

最新無效的做法

<p>巢狀的子元素不能是inline，floated，或blocked

不嚴格的文字型別

您可能也會喜歡…