标点符(钱魏 Way)

浏览器特性检测工具: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

码字很辛苦,转载请注明来自标点符《浏览器特性检测工具:Modernizr》

评论