浏览器特性检测工具: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
建议继续学习:
- 浏览器的工作原理:新式网络浏览器幕后揭秘 (阅读:19512)
- 浅析http协议、cookies和session机制、浏览器缓存 (阅读:15758)
- 从输入 URL 到页面加载完成的过程中都发生了什么事情? (阅读:14461)
- 程序员眼里IE浏览器是什么样的 (阅读:6819)
- 浏览器的渲染原理简介 (阅读:6363)
- 各种浏览器审查、监听http头工具介绍 (阅读:6214)
- 图说浏览器战争:火狐、微软、谷歌那些事 (阅读:6048)
- 浏览器缓存机制 (阅读:5752)
- [译]Google Chrome中的高性能网络 (阅读:5094)
- 12款很棒的浏览器兼容性测试工具推荐 (阅读:4844)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:标点符 来源: 标点符
- 标签: Modernizr 浏览器
- 发布时间:2014-11-26 22:59:34
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [58] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成