个浏览器对html5的兼容性不尽相同，本文将分析各个主流浏览器对其的兼容性。在这里我们将综合两种HTML5兼容性测试工具包HTML5Test和Modernizr的测试结果来分析一下Web浏览器的支持程度。
考虑到HTML5标准的制定原则：新特性基于HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如Flash）；独立于设备等，我们选取了HTML 5的几项主要特性来评价浏览器系统。
浏览器（版本）选取
由于目前市面上的浏览器品牌和版本繁多，我们难以覆盖全部产品，因此在这里设定测试浏览器的选择原则为：主流品牌、主流版本和最新版本（正式发布）。依据StatCounter发布的2011年2~3月份浏览器市场占有率统计分布情况，主流品牌如图1所示。
图 1 主流浏览器分布图
从图1 中可以看出， 微软的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多个版本占据了榜首，开源浏览器Firefox紧随其后，其开放的体系结构也吸引了众多优秀插件，并成为Web开发人员的主要开发调试平台。Google主推的Chrome后来居上，占据了第三名的位置。
浏览器主流版本分布情况如图2所示。
图2 浏览器主流版本分布图
再加上部分最新浏览器版本，我们选取的全部浏览器（版本）如表1所示。
表1 测试浏览器
HTML5兼容性分析
视频播放标记video
在HTML5技术出现之前，大部分Web视频播放是通过浏览器插件如Adobe Flash来实现，这要求客户在观看视频之前安装相应的组件。video标记的出现使开发人员不再依赖于特定第三方技术，下面的代码片段播放了一个视频文件，设定了画面的尺寸，并带有控制按钮（暂停/进度条等）：
video元素潜在地支持多种视频格式，包括：
这些视频格式在HTML5最终标准的接纳程度目前还在各方博弈之中，不过浏览器已经开始选择性地支持Video标记了。表2是兼容性测试结果。
表2 视频标记video测试结果
这里有几点需要注意：
Web开发人员应该根据网页的实际环境来选择合适的预加载属性以达到较好的前端性能。
音频播放标记audio
与视频标记vidio类似，音频播放标记audio也是HTML5标准引入的元素，下面的代码播放了一段音频，带有控制按钮：
audio潜在地支持多种音频格式，包括Oggvorbis、MP3、AAC、wav等，不同浏览器对audio标记的支持程度表3所示。
表3 音频标记audio测试结果
有几点需要说明：
绘图标记canvas
在Web 2.0的世界里，炫目的图形是必不可少的组成部分。HTML5引入的canvas元素支持Web开发人员通过JavaScript在页面上绘制线条、图形、添加文字和图像等。下面的代码片段在页面上简单绘制了一个蓝色矩形：
Canvas的测试结果如表4所示。
表4 绘图标记canvas测试结果
我们欣喜地看到，各种浏览器对canvas的支持度非常高，对于IE8的限制，可以通过开源项目ExplorerCanvas来解决，只需要两步操作：
Form 2.0表单元素
对于企业级Web应用来说，表单控件是最重要的页面元素之一。在HTML 5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成。制定中的HTML 5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等。这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：
由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如表5所示。
表5 部分表单元素测试结果
几点说明：
本地客户端存储
Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小限制，另一方面每次都通过网络请求来传递。HTML 5引入两种新的存储方式：
下面的例子分别使用LocalStorage和SessionStorge实现了简单计数器，结果如表6所示。
表6 本地客户单存储测试结果
相关文章
精彩导读
热门资讯
关注我们
