Modernizr是一个小型 JavaScript库，用于检测下一代Web技术的本机实现的可用性

有几个新功能正在通过HTML5和CSS3但同时许多浏览器都不支持这些新闻功能.

Modernizr提供了一种检测任何新功能的简便方法，以便您可以采取相应的操作.例如，如果浏览器不支持视频功能，那么您希望显示一个简单页面.

您可以根据功能可用性创建CSS规则，这些规则将自动应用于网页如果浏览器不支持新功能.

语法

在开始使用Modernizr之前，您必须将其javascript库包括在内您的HTML页面标题如下 :

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

如上所述，您可以根据功能可用性创建CSS规则，如果浏览器不支持新功能，这些规则将自动应用于网页.

以下是处理支持和不支持的功能的简单语法 :

/* 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-"./p>

以下是通过Javascript检测特定功能的语法;

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

Modernizr检测到的功能

以下是可以使用的功能列表由Modernizr检测 :