HTML5 – Modernizr

Modernizr是一个小型的JavaScript库，用于检测下一代web技术的原生实现是否可用。

HTML5和CSS3引入了许多新功能，但同时许多浏览器并不支持这些新特性。

Modernizr提供了一种简单的方法来检测任何新功能，以便您可以采取相应的行动。例如，如果浏览器不支持视频功能，则您想要显示一个简单的页面。

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

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

语法

在开始使用Modernizr之前，您需要在HTML页面头中包含其JavaScript库，如下所示：

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

如上所述，您可以基于功能可用性创建CSS规则，如果浏览器不支持新的功能，则这些规则会自动应用于页面。

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

/* 在你的CSS中: */
.no-audio #music {
   display: none; /* 不显示音频选项 */
}
.audio #music button {
   /* 美观地设计播放和暂停按钮 */
}

<!--在你的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) {
   /* 支持音频的浏览器 */
}

else{
   /* 不支持音频的浏览器 */
}

Modernizr检测到的功能

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