HTML5开发:原理与实现
在这篇文章中, W3C 浏览器技术核心标准工作成员 Mike Smith 谈论了 HTML5 到底是什么,并给出了一些对开发人员有用的资源,可以让他们跟进不断演化的标准。
我们正处于 Web 平台更新换代的过程之中。HTML5通常被用来描述这一过程,尽管更新换代中的技术并不局限于 HTML5 标准所定义的特性。
我使用了“Web 平台”(Web platform)这个术语,代指能被 Web 浏览器支持的一系列协议、格式以及 APIs。开发者使用这些特性来构建时新的一些应用,这些应用支持社会交互,并且充分利用了设备的能力,比如照相功能、麦克风功能以及 GPS 功能。HTTP、TLS 以及 WebSockets 是 Web 平台中的一部分协议;HTML、CSS 以及 Javascript 是 Web 平台格式中的一些例子。Web 平台中的 APIs 包括 Geolocation API 以及针对
最终,如果一个特性能被广泛实现,并且开发人员经常使用它来创建稳定的用户体验,那么这个特性就成为了 Web 平台的一部分。World Wide Web Consortium (W3C)功不可没,它让股东们坐到一起,统一开发一些免费标准,并创建配套资源,如测试集以及验证程序。
标准作为一个共享协议来说,是非常有用的,但是 Web 平台包括大量不同成熟度的技术,这些技术并没有都标准化。当开发者使用这些技术的时候,就会遇到一些实际的问题了,其中包括:
- 我该如何减少 special-case code?
- 哪些代码现在是足够稳定可以让我使用的?
- 对于那些没有最新浏览器的用户,我该如何处理?
这些问题的答案随着时间发生变化,因此开发者已经制定了切实可行的解决方案,如 fallback 和“polyfills”(这将在稍后进一步解释)这些方案能让内容在老的浏览器以及最新的浏览器中都可用。在这篇文章中,我并没有关注 HTML5 标准的状态,而是探讨了一些有用资源,这些资源可用帮助开发者开始使用现在的开放 Web 平台技术(Open Web Platform technology)。这些资源阐明了使用 HTML5 的“原理与实现方法”,对标准进行了补充,并最终能加快部署。
platform.html5.org
对一个忙碌的开发人员来说,他该如何跟进最新的特性,了解什么 fallbacks 以及、polyfills(如果有的话)是可以用的?我编辑了一个网站, platform.html5.org,它可以让你了解构成 Web 平台的最新技术。(它是由 github repository 支持的,我非常鼓励你来帮助维护这个站点,只需要使用 forking the repo 就可以了,并发送更新请求)。
这个站点将技术进行了分类,如绘图和排版、多媒体以及存储。站点上的图标代表了每个技术的成熟度。绿色的小旗帜表示一个特性可以使用了。黄色闪电代表“需要谨慎使用”。然而,这些都只是很粗略的指示;要想真正了解这些特性,你需要点击后面的一些有用的链接,如下所示:
特别的,HTML5 Please site 值得作进一步的评论。它是由 H5BP developer collective( HTML5 Boilerplate 背后的开发者小组)创建的。它根据名字列出了各个特性,并对每个特性的成熟度做出了高屋建瓴的描述。它还展现了一个状态面板,其中显示了各个特性的状态信 息(可以使用/小心使用/避免使用, use/caution/avoid)。在某些情况下,”caution” 和”use”关键字后附加了”with fallback” 或 “with polyfill”。在有”with fallback”的情况下,你可以扩大该面板查看究竟如何为该特性提供 fallback。
polyfill 是指一段 Javascript 代码,作为一个特性的某种 shim;也就是说,它模拟了一个将来的 API,这个 API 为老的浏览器提供 fallback 功能。
HTML5 Please 的站点管理者让任何人都可以很容易为这个站点做贡献,他们在每个面板上都提供了一个“编辑该信息”(”Edit this info”)的链接,让你可以创建页面内容的副本,并将其提交给该站点。(该机制是由 a github repository 支持的,任何人对内容的修改都会作为 pull requests 提交)。该站点的维护者将会对内容进行审查并合并内容。
有时候你希望能看到比 HTML5 Please 所提供的信息更详细的一些状态信息。例如,你也许想确切知道哪些浏览器支持某个特定的浏览器,以及每个浏览器的哪些版本支持它,或者在移动浏览器中,特性 受到什么程度的支持,以及那些浏览器的 OS 版本是什么。这时候,你就需要查看 When Can I Use…站点了。
When Can I Use 是由 Alexis Deveria 维护的。他跟进大量特性的状态,并在新版本的浏览器发布时更新站点。如果有某种特性是你想要了解但 When Can I Use 站点上还没有的,你可以 建议该站点加上。
现在记录在 When Can I Use 上的每一个特性都有一个表,表中有一列是主流的桌面浏览器(IE, Firefox, Chrome, Safari 以及 Opera),一列是主流的移动浏览器(iOS Safari, Opera Mini, Opera Mobile 以及 Android Browser),每一行是每个浏览器的版本号。和其他站点一样,用颜色标明了每个特定浏览器版本对一个特性的支持度( support/partial (部分支持) , support/no (不支持) , support/unknown (不确定是否支持))。
例如,可以看看 CSS Counters 受到的支持程度。充满绿色条目的表说明该特性受到很好的支持。其他支持不是很好的特性是用红色标出的。
When Can I Use 站点中的每个特性表都提供了一个”see-also”链接到相关特性的表,还有到第三方站点的链接,这些第三方站点提供了这些特性的使用信息,教会你如何使用这些特性进行开发。
MDN (Mozilla Developer Network)是 platform.html5.org 和 When Can I Use 都加了链接的站点。可以将 MDN 看作”how can I use”特性使用指南。例如,如果你想要实现 Web Workers,需要一些代码示例以及链接到有详细信息的资源,那么,MDN 上就有个页面是关于 使用 Web Workers 的,它对于入门非常有帮助。
和 HTML5 Please, When Can I Use 以及 platform.html5.org 一样,MDN 也是非常欢迎大家做贡献的,并让这个过程比其他站点更快捷简单:整个站点就是一个 wiki,所以一旦你创建了一个账户,你就能编辑任何页面。
测试集(Test Suites)
对于评估一个特性的成熟度来说,没有什么方法比拥有一个完整的测试集更好了。你可以自己运行测试集,并分析结果。对于 Web 平台来说,并没有一个集中的库,也没有一个单独的地方可以让你看到所有结果,但是 W3C 已经开始着手建立一个 共享测试框架站点,W3C CSS Working Group 也在建立一个 针对 CSS 的测试框架站点。
这些站点让你可以浏览各个浏览器以及各个浏览器版本对不同测试集的结果。你也可以在你自己的浏览器中运行测试集,并提交结果,让结果整合到框架结果数据库中去。例如, CSS 的多列布局模块测试集的结果数据,或者 可以让你自己在浏览器中运行测试集的启动页面。
结论
前面提到的站点可以帮你跟进新出现的 Web 平台。我希望随着平台的成熟以及更多人分享他们的代码和经验,更多有用的站点能够出现。我很乐意你去使用我提到的这些站点,并将你自己的发现提交到这些站 点,以便让关于 Web 平台的高质量的、最新的信息让大家都能共享。
原文链接: Developing in HTML5: The What and How