HTML - Modernizr

Modernizr 是一个小型 JavaScript 库，用于检测用户浏览器中是否存在特定 Web 技术的功能。它提供了一种简单的方法来检测任何新功能，以便我们可以根据浏览器的功能采取相应的措施。例如，如果浏览器不支持视频功能，则可以显示一条简单的消息。我们还可以根据功能可用性创建 CSS 规则，如果浏览器不支持新功能，这些规则将自动应用于网页。

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

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

示例

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

<!-- In your CSS: -->
.no-audio #music {
   display: none; <!-- to not 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 可以检测到的功能列表：