HTML - Modernizr

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

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

 <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 可以检测到的功能列表 ：