检测浏览器支持哪些HTML5新特性的方法归类.pdfVIP

HTML5 中国： 检测浏览器支持哪些 HTML5新特性的方法 HTML5 不能说是一个全新的事物， 但是大部分人对 HTML5 的了解还是比较少的。 （如果你想 了解 HTML5 的话，不妨查看 IE9 发布的 HTML5 视频 。） 虽然目前新版的主流浏览器，诸如 IE9、Firefox4、Chrome10 都已经开始支持 HTML5 特性了，但是目前所有浏览器对 HTML5 的 支持事不 完整的， 主要是因为 HTML5 还处在制定过程中。 如果你想检测你的浏览器究竟支 持 HTML 5 的哪些特性，可以查看下面我们介绍的一种方法。 当 浏览器渲染 web 页面的时候，它会构造一个文档对象模型（ Document Object Model ， DOM ）。这是一组用于表现页面上 HTML 元素的对象。 每一个元素， 例如每一个 p，每一 个 div ，每一个 span 都有不同的 DOM 对象表示。当然，也有一种全局的对象，例如 window 和 document ，不过它们不是用来表示特定元素的。 所有的 DOM 对象都有一些通用属性，也有其自己特有的属性。支持 HTML 5 特性的浏览 器就会包含这种独一无二的属性。 因此， 我们利用这种技术， 就可以检测浏览器究竟支持哪 些新特性。在本节的后面的部分中，我们将从易到难地详细介绍这种技术。 Modernizr —— HTML 5 检测库 Modernizr 是一个开源的，基于 MIT 协议的 JavaScript HTML 5 特性检测库。它能够检测很 多 HTML 5 和 CSS 3 的特性。你可以在其主页或者这里的地址（ modernizr-1.7.min.js ，注意 修改后缀名） 中找到最新版本 （当前最新版本是 1.7 ）。同别的 JS 库一样， 你应该在 head 块 中将其引入： !DOCTYPE html html head meta charset= ”-8utf″ titleDive Into HTML5/title script src= ” modernizr.min.js ” /script /head body … /body /html Modernizr 会自动运行，不需要调用类似 modernizr_init() 的函数。一旦开始运行，它就会 创建一个名叫 Modernizr 的全局变量。 这个全局变量包含它能够检测到的新特性的布尔值。 例如，如果你的浏览器支持 canvas API ，那么 Modernizr.canvas 就会是 true ；如果不支持 则是 false 。 if (Modernizr.canvas) { // let ’s draw some shapes! } else { // no native canvas support available HTML5 中国： } canvas HTML 5 定义了 元素。这是一个 “设备独立的位图画布，可以用于渲染图表、游戏图像或者 其他可视图像 ”。在页面上 canvas 是一块矩形区域， 你可以使用 javascript 语句在上面进行 绘制。 HTML 5 定义了一系列绘制函数（ canvas API），用于绘制形状、定义路径、创建渐变 或者应用变形等。 我们可以使用上面的 js 库检测 canvas API。如果你的浏览器支持 canvas API，DOM 对象就 可以创建一个含有 getContext() 函数的 元素；如