Modernizr.js 是一个很小的用来检测下一代 Web 技术原生实现可用性的 JavaScript 库。(大白话就是用来兼容HTML5和css3的JS库)
HTML5 和 CSS3 都引入了各自的新特性,但是同时也有很多浏览器不支持这些新特性。
Modernizr 提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作。比如,浏览器还不支持视频特性,那么我们可以显示一个简单的页面。
我们还可以基于某个特性的可用性来创建 CSS 规则,如果浏览器不支持某个新特性,那么这些规则将会自动应用到网页上(自动帮助友好处理),其官网可以自助选择需要兼容的选项。
官网下载地址:https://modernizr.com
引入:
<script type="text/javascript" src="js/modernizr.js"></script>处理兼容和不兼容的css3属性示例:
/* In your CSS: */ .no-audio #music { display: none; /* Don't show Audio options */ } .audio #music button { /* Style the Play and Pause buttons nicely */ } <!-- In your HTML: --> <div id="music"> <audio> <source src="audio.ogg" /> <source src="audio.mp3" /> </audio> <button id="play">Play</button> <button id="pause">Pause</button> </div> 要处理的浏览器还不支持的特性或者属性使用 “no-” 前缀。
通过 JavaScript 检测特定属性的语法:
if (Modernizr.audio) { /* properties for browsers that support audio */ }else{ /* properties for browsers that does not support audio */ }