浏览器特性检测工具：Modernizr

10年前，只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持既不完善又漏洞百出，所以他们在坚持WEB标准化的同时，不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的最多的hack技术是浏览器嗅探（browser sniffing），使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支，以便针对不同的浏览器应用不同的指令。

今天，以CSS为基础进行的布局已经非常普遍，浏览器们对它的支持也非常的坚实。但是现在CSS3和HTML5来了，历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。面对这样的问题，我们该怎么做呢？简单！使用特征检测（feature detection），这意味着我们不必通过问浏览器“你是谁？”来做出不靠谱的推测。取而代之我们问浏览器“你能做这个或那个吗？”。

想要一个个检测浏览器对特性的支持，看上去是个繁琐的工作，好在有了 Modernizr的帮助。Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。 一整套测试的执行时间仅需几微秒。

Modernizr是基于 渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。

Modernizr 可轻松实现 JavaScript 解决方案，即人们熟知的 polyfills——它模拟HTML5 相关功能和技术，如地理定位。 然而，你的确需要对 JavaScript 有基本了解以便使用这些功能和技术。 术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla（即美国人熟知的填泥料）。 这里，polyfill 用来填补浏览器功能上的漏洞。 有时，Modernizr 可无缝地执行这项任务。 但本质上，这只是一种修补工作，所以，不能依赖它产生无漏洞浏览器所实现的完全相同结果。

Modernizr提供development和production两个版本，development版本包含了对所有HTML5和CSS3新特性的检测，适用于学习和测试，对于刚开始使用Modernizr的新手来说，bella建议你使用这个版本。当你熟悉了Modernizr的工作原理后，你就可以使用production这个自定义版本，你可以只下载任意数量的你需要检测的特性从而大大减小下载量，这在某种程度上是能小幅提高你程序的性能的。你可以在http://modernizr.com/download/上下载这两个版本，点击该页面上的development version链接，就可以下载development版，或者，你已经看到了如下的特性显示页面。

相关资料：

1. Modernizr官网:  http://modernizr.com/docs/

2. Modernizr Test Suite网址： http://modernizr.github.com/Modernizr/test/index.html

3. shim/polyfill脚本的相关信息：  https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

4. 各种检测HTML5和CSS3新特性的addTest函数下载地址： https://github.com/Modernizr/Modernizr/tree/master/feature-detects

Related posts:

1. 15个网站设计和开发的Chrome插件
2. 在Windows上安装配置Redis及Python使用
3. 怎样设计一个好的URL