1. WIKI教程
2. 学习HTML5
3. HTML5 - Modernizr( Modernizr)

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

特征	CSS属性	JavaScript检查
@font-face	.fontface	Modernizr.fontface
Canvas	.canvas	Modernizr.canvas
Canvas Text	.canvastext	Modernizr.canvastext
HTML5音频	.audio	Modernizr.audio
HTML5音频格式	NA	Modernizr.audio[format]
HTML5视频	.video	Modernizr.video
HTML5视频格式	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动画	.cssanimations	Modernizr.cssanimations
CSS列	.csscolumns	Modernizr.csscolumns
CSS Gradients	.cssgradients	Modernizr.cssgradients
CSS Reflections	.cssreflections	Modernizr.cssreflections
CSS 2D变换	.csstransforms	Modernizr.csstransforms
CSS 3D变换	.csstransforms3d	Modernizr.csstransforms3d
CSS过渡	.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剪辑路径	.svgclippaths	Modernizr.svgclippaths
SMIL	.smil	Modernizr.smil
Web SQL数据库	.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)