通过 Modernizr 安全地使用 HTML 5 和 CSS 3

阅读数:2908 2011 年 6 月 10 日

话题:Java.NETRubyJavaScriptHTML5语言 & 开发

使用 HTML 5 和 CSS 3 的主要问题不是普及程度和浏览器之间的差异,而在于首先了解这些差异是什么。一旦搞清楚,开发人员就能够采用优雅降级 (graceful degradation) 技术解决这些局限性。为此,许多开发人员求助于开源项目 Modernizr。

Modernizr不是检测 user-agent 字符串,而是使用一系列测试来判断浏览器的特性。在几毫秒内它就能够执行超过 40 种测试并将结果作为属性记录在名为 Modernizr 的对象中。开发人员可以通过这些信息检测他们准备使用的某特性是否被浏览器支持并作出相应的处理。

在 Modernizr 2.0 版中,它增加了一个针对 JavaScript 和 CSS 的条件资源加载器 (conditional resource loader)。该资源加载器接受三个参数,第一个是表达式,列举了所需的特性。第二个参数是如果表达式返回 true 则加载的 JavaScript 和 CSS 文件列表。第三个参数是所需特性不存在的情况下备用的文件列表。

除了优雅降级,加载器还可用于引入polyfill。请允许我向那些还不太熟悉 pollyfill 的朋友解释一下,pollyfill 是“一种 JavaScript 垫片 (shim),为老版本浏览器模拟了标准 API”。虽然这种方式不总是值得推荐,但是 pollyfill 能够用来添加(Modernizr 检测到的)大多数 HTML 5 特性的支持。

为了改进性能,开发人员可以定制 Modernizr 来执行网站所需的测试。这可以通过Modernizr 下载页面来完成,该页面同时显示了能够检测的特性列表。在 github 网站上还标有无法检测的特性和可能的解决办法。 

查看英文原文Safely use HTML 5 and CSS 3 Today with Modernizr