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

特征	CSS 属性	JavaScript 检查
@font-face	.fontface	Modernizr.fontface
Canvas	.canvas	Modernizr.canvas
Canvas Text	.canvastext	Modernizr.canvastext
HTML Audio	.audio	Modernizr.audio
HTML Audio formats	NA	Modernizr.audio[format]
HTML Video	.video	Modernizr.video
HTML Video Formats	NA	Modernizr.video[format]
rgba()	.rgba	Modernizr.rgba
hsla()	.hsla	Modernizr.hsla
border-image	.borderimage	Modernizr.borderimage
border-radius	.borderradius	Modernizr.borderradius
box-shadow	.boxshadow	Modernizr.boxshadow
Multiple backgrounds	.multiplebgs	Modernizr.multiplebgs
opacity	.opacity	Modernizr.opacity
CSS Animations	.cssanimations	Modernizr.cssanimations
CSS Columns	.csscolumns	Modernizr.csscolumns
CSS Gradients	.cssgradients	Modernizr.cssgradients
CSS Reflections	.cssreflections	Modernizr.cssreflections
CSS 2D Transforms	.csstransforms	Modernizr.csstransforms
CSS 3D Transforms	.csstransforms3d	Modernizr.csstransforms3d
CSS Transitions	.csstransitions	Modernizr.csstransitions
Geolocation API	.geolocation	Modernizr.geolocation
Input Types	NA	Modernizr.inputtypes[type]
Input Attributes	NA	Modernizr.input[attribute]
localStorage	.localstorage	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
Web Workers	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
SVG Clip Paths	.svgclippaths	Modernizr.svgclippaths
SMIL	.smil	Modernizr.smil
Web SQL Database	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
Web Sockets	.websockets	Modernizr.websockets
Hashchange Event	.hashchange	Modernizr.hashchange
History Management	.historymanagement	Modernizr.historymanagement
Drag and Drop	.draganddrop	Modernizr.draganddrop
Cross-window Messaging	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest() Plugin API	NA	Modernizr.addTest(str,fn)