原文地址: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的不同。