Html5 简明教程

HTML - Modernizr

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

Modernizr is a small JavaScript Library that detects whether a particular feature of web technologies is available or not in the user’s browser. It provides an easy way to detect any new feature so that we can take corresponding action based on the browser’s capabilities. For example, if a browser does not support a video feature then we can display a simple message regarding the same. We can also create CSS rules based on the feature availability and these rules would be applied automatically on the webpage if the browser does not support a new feature.

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

Before we start using Modernizr, we are required to include its javascript library in our HTML page header as follows −

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

Instance

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

Following is the simple syntax to handle supported and non supported features −

<!-- 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-”。

Here it is notable that you need to prefix "no-" to every feature/property you want to handle for the browser which does not support them.

可以添加以下代码段以通过 JavaScript 检测特定功能：

Following code snippet can be added to detect a particular feature through Javascript −

if (Modernizr.audio) {
   <!-- properties for browsers that
   support audio -->
}

else{
   <!-- properties for browsers that
   does not support audio -->
}

Features detected by Modernizr

以下是 Modernizr 可以检测的功能列表：

Following is the list of features which can be detected by Modernizr −

Feature

CSS Property

JavaScript Check

@font-face

.fontface

Modernizr.fontface

Canvas

.canvas

Modernizr.canvas

Canvas Text

.canvastext

Modernizr.canvastext

HTML Audio

.audio

Modernizr.audio

HTML Audio formats

Modernizr.audio[format]

HTML Video

.video

Modernizr.video

HTML Video Formats

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

Modernizr.inputtypes[type]

Input Attributes

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

Modernizr.addTest(str,fn)