---恢复内容开始---
Modernizr 浏览器对HTML5和CSS3开发的功能检测类库
由于当前用户使用的浏览器版本较多,对H5和CSS3的支持也各不相同。前端的开发者,在使用一些新的特性的时候,就比较的麻烦。需要去兼容各种浏览器,判断这些浏览器是否支持这些新的特性。
Modernizr可以帮助前端的开发者很好的解决这一问题。
Modernizr是什么?
用官网的话说,Modernizr是一个JavaScript库,在用户的浏览器中监测对HTML5和CSS3功能支持。这也是我们的目的所在。
下面我们来通过一个简单的例子来说明一下不同浏览器对HTML5和CSS3的支持。
比如对于的HTML5的Canvas标签的支持。就目前的浏览器来说,Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。但是ie9以下的版本是不支持Canvas的。
如果你的浏览器支持Canvas以下这段代码的效果就是下面的红色矩形图
Modernizr您的浏览器不支持Canvas
如果不支持,就会显示一段话:您的浏览器不支持Canvas;
Madernizr 是怎么检测浏览器对HTML5和CSS3的功能支持呢?
只需要简单的引入Madernizr.js 。类库可以从官网下载到。分为压缩版和未压缩版。
下载下来后,我们只要在页面引用既可。
然后打开页面。从运行后的代码页面我们可以看到在html 标签里面多出了一些东西。这写就是Modernizr监测你所使用的浏览器对HTML5和CSS3的支持情况。
仔细看一下会发现, 在touch属性前面多出了一个"no-"的标签。这个就表示所使用的浏览器不支持touch属性。但是当我使用浏览器的开发工具模拟手机浏览器时,这边我模拟的是ipone 4,touch属性前面就没有"no-"的标签。因为现在的触屏手机浏览器都是支持touch属性的。
知道了Modernizr可以监测到浏览器对HTML5和CSS3的支持情况。下面再看一下我们怎么用Modernizr。
我们就以touch属性为例。Modernizr在页面加载初始化后,会创建一个名为MNodernizr的对象。对象的每个属性都是检测浏览器对HTML5和CSS3的属性支持的布尔值。
Modernizrif(Modernizr.touch) { alert("浏览器支持touch"); }else{ alert("浏览器不支持touch"); }
另外不仅可以通过Javascript进行判断,还可以通过css的类名来进行判断。
Modernizr.yes,.no{display:none}.touch .yes{display:block;}.no-touch .no{display:block;}
支持touch属性