最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

modernizr:检测浏览器对HTML5和CSS3特性

日期:08-03    来源:中国设计秀    作者:cnwebshow.com

文章简介:Modernizr与HTML5.pXU中国设计秀

 pXU中国设计秀

好吧,现在流行HTML5,我就给它标题加上个HTML5吧 :)pXU中国设计秀

其实modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和css3特性支持的JS库,著名的HTML5/css3浏览器兼容性网站FindmeByIP就是基于该框架实现的。pXU中国设计秀

pXU中国设计秀

可以看到,右下角绿色按钮上面有Modernizr的链接。pXU中国设计秀

Modernizr的功能pXU中国设计秀

modernizr的功能其实很简单,就是用js检测浏览器对HTML5/css3的特性支持情况,支持某个属性,就在页面的<html>标签上添加一个相应的class,不支持的话就添加一个no-前缀的class,比如,如果检测的浏览器支持video标签,modernizr就会在<html>标签上添加video类,否则,添加no-video类。pXU中国设计秀

查看FindMeByIP的源码或者用firebug之类的工具查看页面代码,就可以看到<HTML>标签中的class。pXU中国设计秀

另外,modernizr也提供了另外一种用法,就是单独的检测浏览器对某个特性的支持情况,例如:pXU中国设计秀

if (Modernizr.video) {}

通过类似的接口检测浏览器对HTML5的支持情况,是比较安全的。pXU中国设计秀

浏览器检测:UA VS 特性pXU中国设计秀

其实大家通常都会用UA去检测一个浏览器,当然ua也提供了更丰富的信息,UA不是万能的,它也有一些弱点,比如,用户浏览器的UA伪装,某些落后浏览器提供的UA信息太少,这些都会影响到对浏览器信息的判断。更重要的是,对于HTML5特性来说,用UA去判断一个浏览器是否支持某个特性,实现太复杂而且不靠谱pXU中国设计秀

当然,关于UA和特性检测的争论一直都有,我这里想说的是,具体问题具体分析,在网站中使用HTML5来检测特性支持要比UA更靠谱、更方便~~pXU中国设计秀

使用ModernizrpXU中国设计秀

modernizr的用法很简单,仅仅在页面中引入库的js文件即可:pXU中国设计秀

<script type="text/javascript" src="modernizr-1.5.js"></script>

Modernizr是开源的,但是由于某种原因,它被G-FW给封掉了。pXU中国设计秀

Modernizr @ gitpXU中国设计秀

modernizr项目托管在git,你可以通过以下地址获取它:pXU中国设计秀
http://github.com/Modernizr/ModernizrpXU中国设计秀
作者还在git提供了一个简单的输出页:pXU中国设计秀
http://modernizr.github.com/Modernizr/output.htmlpXU中国设计秀
和一个详细测试页面:pXU中国设计秀
http://modernizr.github.com/Modernizr/test/index.htmlpXU中国设计秀

扩展阅读:pXU中国设计秀

detacting HTML5 featurespXU中国设计秀
Safely Deploy HTML5 and css3 with ModernizrpXU中国设计秀