Modernizr是一个小型 JavaScript库，用于检测下一代Web技术的本机实现的可用性
有几个新功能正在通过HTML5和CSS3但同时许多浏览器都不支持这些新闻功能.
Modernizr提供了一种检测任何新功能的简便方法，以便您可以采取相应的操作.例如，如果浏览器不支持视频功能，那么您希望显示一个简单页面.
您可以根据功能可用性创建CSS规则，这些规则将自动应用于网页如果浏览器不支持新功能.
在开始使用Modernizr之前，您必须将其javascript库包括在内您的HTML页面标题如下 :
<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-"./p>
以下是通过Javascript检测特定功能的语法;
if (Modernizr.audio) {
/* properties for browsers that
support audio */
}
else{
/* properties for browsers that
does not support audio */
}以下是可以使用的功能列表由Modernizr检测 :
| 功能 | CSS属性 | JavaScript检查 |
|---|---|---|
| @ font-face | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canv as |
| 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 | .boxsh adow | Modernizr.boxshadow |
| 多个背景 | .multiplebgs | Modernizr.multiplebgs |
| opacity | .opacity | Modernizr.opacity |
| CSS动画 | .cssanimations | Modernizr.cssanimations |
| CSS列 | .csscolumns | Modernizr.csscolumns |
| CSS Gradients | .cssgradients | Modernizr.cssgradients |
| CSS反思 | .cssreflections | Modernizr.cssreflections |
| CSS 2D变换 | .csstransforms | Modernizr.csstransforms |
| CSS 3D转换 | .csstransforms3d | Modernizr.csstransforms3d |
| CSS Tr ansitions | .csstransitions | Modernizr.csstransitions |
| 地理位置API | .geolocation | Modernizr.geolocation |
| 输入类型 | NA | Modernizr.inputtypes [type] |
| 输入属性 | 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套接字 | .websockets | Modernizr.websockets |
| Hashchange事件 | .hashchange | Modernizr.hashchange |
| 历史管理 | .historymanagement | Modernizr.historymanagement |
| 拖放 | . draganddrop | Modernizr.draganddrop |
| 跨窗口消息传递 | .crosswindowmessaging | Modernizr.crosswindowmessagi ng |
| addTest()插件API | NA | Modernizr.addTest(str，fn) |
