有料笔记-品牌运营增长社区
### 浏览器对HTML5的兼容性分析
#### 主流浏览器版本选择
随着HTML5技术的普及和推广，Web开发社区逐渐开始尝试在RIA（富互联网应用）中使用HTML5，这种实践的主要优势在于开发人员能够通过HTML5的各种技术以一种前所未有的统一、简洁、无插件依赖的方式实现炫目、复杂的Web应用，不过，作为新技术的HTML5在各种Web浏览器中的实现程度或者说平台兼容性一直是Web开发人员的心病。
从2006年WHATWG和W3C决定合作制定HTML5标准以来（预计2012年成为候选标准），浏览器厂商都不甘落后，一直在努力实现更多的HTML5技术，不过由于各个厂商的步伐不一，导致HTML5在浏览器中的实现程度参差不齐，在这里我们将综合两种HTML5兼容性测试工具包HTML5Test和Modernizr的测试结果来分析一下Web浏览器的支持程度。
考虑到HTML5标准的制定原则：新特性基于HTML、CSS、DOM以及JavaScript；减少对外部插件的需求（比如Flash）；独立于设备等，我们选取了HTML5的几项主要特性来评价浏览器系统。
```html
Your browser does not support the video tag.
```
Ogg——采用Theora视频编码和Vorbis音频编码的Ogg视频文件。
MPEG4——采用H.264视频编码和AAC音频编码的MPEG4视频文件。
WebM——采用VP8视频编码和Vorbis音频编码的WebM视频文件。
表1是兼容性测试结果：
| 浏览器 | 版本 | Ogg | MPEG4 | WebM |
||||||
| Internet Explorer 9 | 默认支持MPEG4 (H.264) | 不支持 | 支持（需安装插件） |
| Safari | 5.1+ | 不支持 | 支持 | 不支持 |
| Firefox | 4.0+ | 支持 | 支持 | 支持 |
| Chrome | 12+ | 支持 | 支持 | 不支持 |
| Opera | 11.5+| 支持 | 支持 | 支持 |
这里有几点需要注意：
最新发布的IE9默认只支持MPEG4（H.264编码）格式文件（支持硬件加速），如果安装了WebM/VP8插件，可以支持WebM视频格式。
Safari浏览器依靠QuickTime做视频播放，所以Safari支持的视频格式与QuickTime一致，QuickTime在Mac机上是预装的，其默认支持的视频格式是MPEG4，但在Windows系统上QuickTime需要手动安装，也就是说在Windows上默认情况下Safari是不支持所有视频格式的，这一点需要Web开发人员了解。
Firefox 4.0还将支持WebM格式。
Chrome已经宣布不再支持MPEG格式的视频。
Video元素有一个preload属性，可能的值包括：Auto——当页面加载后载入整个视频；Meta——当页面加载后只载入元数据；None——当页面加载后不载入视频，Web开发人员应该根据网页的实际环境来选择合适的预加载属性以达到较好的前端性能。
Your browser does not support the audio element.
| 浏览器 | 版本 | Ogg | MP3 | AAC | WAV |
|||||||
| Internet Explorer 9 | 默认不支持 | 不支持 | 支持 | 支持 | 支持 |
| Safari | 5.1+ | 支持 | 支持 | 支持 | 支持 |
| Firefox | 4.0+ | 支持 | 支持 | 支持 | 支持 |
| Chrome | 12+ | 支持 | 支持 | 支持 | 支持 |
| Opera | 11.5+| 支持 | 支持 | 支持 | 支持 |
有几点需要说明：
audio元素同样具有preload属性，注意正确设置属性值。
Canvas的测试结果如表3所示：
| 浏览器 | 版本 | 支持情况 |
||||
| Internet Explorer 8 | 不完全支持 | 通过ExplorerCanvas解决 |
| Safari | 5.1+ | 支持 |
| Firefox | 4.0+ | 支持 |
| Chrome | 12+ | 支持 |
| Opera | 11.5+| 支持 |
#### Form 2.0表单元素
对于企业级Web应用来说，表单控件是最重要的页面元素之一，在HTML5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成，制定中的HTML5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等，这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：
由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如表4所示：
| 浏览器 | 版本 | email | url | number | range | search | color | autocomplete | autofocus |
|||||||||||
| Internet Explorer 9 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 |
| Safari | 5.1+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Firefox | 4.0+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Chrome | 12+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Opera | 11.5+| 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
几点说明：
Firefox 4.0将开始支持email、url等表单元素。
自动填充已经作为许多浏览器的一项基本功能存在，与HTML5标准的autocomplete属性需要区别开。
#### 本地客户端存储
Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小限制，另一方面每次都通过网络请求来传递，HTML5引入两种新的存储方式：localStorage——没有时间限制的数据存储 sessionStorage——针对session的数据存储，下面的例子分别使用LocalStorage和SessionStorage实现了简单计数器，结果如表5所示：
表5是本地客户端存储测试结果：
| 浏览器 | 版本 | localStorage | sessionStorage |
|||||
| Internet Explorer 9 | 完全支持 | 完全支持 |
| Safari | 5.1+ | 完全支持 | 完全支持 |
| Firefox | 4.0+ | 完全支持 | 完全支持 |
| Chrome | 12+ | 完全支持 | 完全支持 |
| Opera | 11.5+| 完全支持 | 完全支持 |
标签： 如何 评估 不同 浏览器 TML
本文地址：https://www.lifejia.cn/news/87099.html
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：cloudinto#qq.com（把#换成@）
HTML5的兼容性因浏览器而异，主流浏览器如Chrome、Firefox等支持较好，旧版浏览器可能存在部分功能不支持。
