Modernizr（Modernizr）

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

通过HTML5和CSS3引入了几个新功能，但同时许多浏览器不支持这些新闻功能。

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

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

您可以从Modernizr下载下载此实用程序的最新版本。

语法 (Syntax)

在开始使用Modernizr之前，您必须在HTML页面标题中包含其javascript库，如下所示 -

<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-”。

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

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

Modernizr检测到的功能

以下是Modernizr可以检测到的功能列表 -