原文地址:http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/
幾周以前,HTML5成為W3C的一個正式推薦。我在SitePoint上針對這一事件討論了5個有趣但現在過時的功能 。
問題在於W3C標準是同一硬幣的一面。從HTML的這個版本開始,開發者和瀏覽器供應商可以在相同標記語言的兩種不同風格之間進行選擇:W3C開發的規範和WHATWG開發的規範。
譯者注:WHATWG:Web Hypertext Application Technology Working Group,網頁超文字應用技術工作小組,是一個以推動網路標準為目的而成立的組織。(為了準確,後面不做翻譯)
就大部分而言,這些規範都是相同或者說非常相似的,但是幾年過去之後,越來越多的差異出現。你會關心他們嗎?在大多數情況下不會,因為它對你和你的專案差異很小,或者瀏覽器供應商會支援這兩個標準。然而,在短期內,那些影響已給定功能實現的差異可能對你比較重要。每個瀏覽器供應商遵循規範都有自己的需求。例如來自於Mozilla的David Baron目前宣告:
當W3C和WHATWG的HTML標準不同時,我們傾向於遵循WHATWG標準。
在這篇文章裡,我們將解決W3C和WHATWG標準之間的一些差異,在每個部分的結尾我會給出我對差異的看法。這並不是一個全面的列表,但是足夠讓你在這個問題有自己的觀點。
“HTML5” vs “HTML 現存標準”
我們以一個簡單的主題來開始討論差異:標準的名稱。WHATWG標準的版本去掉了名字後面的”5″在2011年初更名為”HTML”。然後,又改名為”HTML 現存標準”來指定它將不斷髮展和不再支援使用版本號引用。
相反地,W3C標準繼續使用數字,正如介紹中提到的一樣,最後一個穩定版本是5,例如HTML5。作為這一步的結果,該組織正在積極開發的標準被稱為HTML5.1新版本。在HTML5.1裡,一些HTML5裡面的元素和屬性將不會再有,例如正在討論的dailog
元素,month
和week
型別的input
。
觀點
我認為現在和2000年之前的世界變化太大了,因為技術以一個瘋狂的速度發展著,尤其在web端。所以,刪除版本號使其具有連續性聽起來是比較合理地。然而,不是所有的瀏覽器都會自動更新或者以同樣的速度釋出(常用的術語是一個evergreen browser),所以將一組功能放到一個或者多個瀏覽器版本是有道理的。
我的觀點是,有一個版本可以供開發人員參考並做出更好的計劃,直到每一個瀏覽器都採用這一策略的快速釋出和自動更新。不是因為,為了使用一些的功能去開發網站而需要檢測瀏覽器的版本(你真的需要使用該功能檢測),而是因為,我們可以獲得其統計資料使用一個特定版本的瀏覽器。使用這些統計資料,在合適的時間你可以採用一些功能在你的專案中。
polyfills 和 shims可以幫助你實現,但是把它們加到你的網站中你需要考慮權重?
main
元素
main
元素是最新增加標準中的其中一個,不同的標準對於它有不同的定義。W3C標準定義為頁面的主要內容 – 內容是一個頁面的主要主題或者一個應用的核心功能。標準還定義一個文件中不能出現一個以上的main
元素,並且main
元素需要搭配role="main"
或者其他等效性的APIS。
根據這個標準的一個簡單的例子如下所示:
<body>
<header>
<h1>Main title</h1>
</header>
<main>
<article>
<h1>Main title</h1>
<p>This is the content of this section</p>
<footer>
The author of this content is Aurelio De Rosa
</footer>
</article>
</main>
<footer>
<small>Copyright © Aurelio De Rosa 2014</small>
</footer>
</body>
WHATWG標準不給main
元素分配任何語義值,它定義為其他元素主導內容的容器。如果你堅持WHATWG標準,它沒有限制你使用main
元素的次數。因此如果你在一個頁面中有多個article
元素,你需要使用main
元素標記每個article
的的內容。
使用基於WHATWG標準的一個例子是:
<body>
<header>
<h1>Main title</h1>
</header>
<main>
<article>
<h1>Main title</h1>
<main>
<p>This is the content of this section</p>
</main>
<footer>
The author of this content is Aurelio De Rosa
</footer>
</article>
</main>
<footer>
<small>Copyright © Aurelio De Rosa 2014</small>
</footer>
</body>
請注意,在上面的程式碼中,我使用了兩次main
元素。
觀點
關於main
元素,我與W3C看法一致,因為我質疑在一個文件中有多個主要區域的需求。此外,我記得 Steve Faulkner(W3C的標準的編輯)多次敦促 Ian Hickson(WHATWG標準的編輯)在WHATWG郵件中提供能夠證明需要多個主要區域的資料。結論是,在所有的場合WHATWG編輯提供這些資料失敗。
hgroup
元素
hgroup
元素用於組合一個或多個h1
–h6
的元素集合,對組織一個部分的標題和相應的子標題十分有用。
引入此元素以便於建立子標題,並解決文件輪廓演算法的重要問題。實際上,將多個標題元素放在hgroup
中,想象文件大綱應該是包含所有標題,但從最終的結果中看出只有最高階別的標題元素。
一個使用它的例子,來源於我的文章HTML5中5個過時的功能,如下所示:
<article>
<hgroup>
<h1>5 deprecated features of HTML5</h1>
<h2>Sometimes specifications are changed
and you need to refactor your code</h2>
</hgroup>
<p>In this article we`ll discuss...</p>
</article>
2013年4月由於缺乏實現,用例不足和促進標記反面模式而從W3C標準刪除。相反地,WHATWG標準還包括ghroup
。
觀點
正如引用文章中所說,我一直是這個元素的粉絲但是我棄用了它。第一個原因是,我是W3C標準的一個追隨者。第二個原因是,我注意到對這個缺乏興趣和在瀏覽器中實現。
Web Notifications API
Web Notifications API定義是為終端使用者提供通知的一個API。一個允許提示使用者當前網頁之外的通知,例如電子郵件傳送。每當使用者收到了一封新的電子郵件都需要通知使用者或者有意見事情需要他們關注。一些具體的例子是如果有人在twitter發文,或者發了一張照片在Facebook或Google+。
使用此API的簡單例子如下:
Notification.requestPermission(function() {
var notification = new Notification(`Email received`, {
body: `You have a total of 3 unread emails`
});
notification.onshow = function() {
console.log(`Notification shown`);
};
});
Web Notifications API在W3C標準和WHATWG標準都有明確的規定,兩個版本之間有一些差異。特別地,WHATWG標準去掉了onclose
和onshow
事件。因此,W3C標準定義了4個事件(onclick
, onclose
, onerror
, 和onshow
),WHATWG標準只定義了兩個(onclick
和 onerror
)。
如果你想了解更多API的不同版本和主要瀏覽器的支援,你可以看看我的這篇文章Web Notifications API的狀態。
觀點
標準之間沒有太大的差異,但是它會影響你執行某些任務的方法。在這種情況下,我遵循W3C標準,我考慮的當我觸發關閉事件的需要做執行某些操作,但是WHATWG不可能。
結論
在本文中我們討論了一些W3C與WHATWG標準之間最重要的差異。正如你看到的,考慮到標準中定義的元素和APIS的數量,還是沒有太多的差異。有了這一想法,就不會擔心未來,因為我相信標準最後都會和現實需求匹配,這意味著,不管哪個組織開始一個新的功能都會有明確的規定,開發者和瀏覽器供應商都有權利去使用成功的一個或另一個版本。因此,瀏覽器供應商和開發者是決定哪個標準”成功”實施或者棄用他們的主導者。正因為如此,對於每一個討論的功能,最終都會該表標準以符合現實需求。
最後一點,如果你想發現更多的差異,你可以看W3C的這篇文章 W3C HTML5.1標準與WHATWG LS的不同。