modernizr插件使用心得

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 */
}

Modernizr 提供的特性检测：