Modernizr 用法

为什么需要 Modernizr

浏览器的发展参差不齐，以最新版 Firefox、Google Chrome、Safari 来说，它们支持的 HTML5、CSS3 特性恐怕也不尽相同，而况还有用户的情况，不同用户使用不同浏览器的不同版本，于是造成 Web 开发者在开发网站时，要面对数量庞大的浏览器种类。

如果开发时按最低标准，比如 IE6 不支持的特性，我们统统不用，那就没 Modernizr 什么事；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在早期浏览器上做一定的降级处理，这就是所谓 “Progressive Enhancement”，也是 Modernizr 要起的主要作用。

Modernizr 的作用

下载引用

首先，下载 Modernizr 文件，然后在页面 <head></head> 中引用：

<script src="js/modernizr.js"></script>

需要注意这段代码的位置，放在 <head></head> 部分、所有样式表文件 link 后 – 之所以放样式表后面，是为了不阻塞 CSS 的加载。

放在 <head></head> 中的原因有二：

  1. HTML5 Shiv 需要在 <body> 前执行，这样样式表才能识别 HTML5 中新增的标签
  2. 防止 FOUC

如果这两样你都不介意，那么请随便找个位置添加 modernizr。

添加 no-js

另外，我们还需要在 <html> 标签中添加一个 no-js 类：

<html class="no-js">

如果 Modernizr 正常运行，它会移除 no-js，添加一个 js 类；假如用户浏览器禁用 JavaScript，则 Modernizr 无法运行，html 标签就有 no-js。

在 HTML5 Boilerplate 里，<html> 标签是这样写的，比仅加一个 no-js 更复杂：

<!--[if lt IE 7]>      
  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> 
<![endif]-->
<!--[if IE 7]>           
  <html class="no-js lt-ie9 lt-ie8"> 
<![endif]-->
<!--[if IE 8]>         
  <html class="no-js lt-ie9"> 
<![endif]-->
<!--[if gt IE 8]><!--> 
  <html class="no-js"> 
<!--<![endif]-->

页面在加载完 Modernizr.js 后，会自动运行生成一个 JavaScript 对象Modernizr，这个对象中包含浏览器特性支持的真假值，另外，它还会给 <html>标签添加新的类(class)，以标明浏览器对 HTML5、CSS3 特性的支持情况。以我的 Firefox 21 for Linux 为例，一个 HTML5 Boilerplate 页面的 <html> 标签在 Modernizr 作用后会变成如下：

<html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

它表示我的浏览器支持 HTML5 的 geolocation、history，CSS3 的多背景图片等特性，一目了然。

这样，我们在使用 CSS3 时就可以做一定的降级，比如：

body {
    background: url(background-top.png) top left no-repeat;
}
.multiplebgs body {
    background: url(background-top.png) top left no-repeat,
    url(background-bottom.png) bottom left repeat-x;
}

早期的浏览器下，我们使用一张背景图片，而支持多背景图片的浏览器下，我们将使用两张背景图片。

但这只是 Modernizr 的简单应用，它还有复杂应用，比如 HTML5 特性:

if (Modernizr.canvas) {
  // 可以使用 canvas
} else {
  // 浏览器没有原生的 canvas 支持，做一定的降级处理，或是加载 polyfills
}

基本上所有 HTML5 特性都有相应的 Polyfills 进行处理，至于是否必要，那就看项目需要了：有时候，你可以，不一定代表你要。毕竟，在 IE6 上支持 Geolocation 这样的特性意义不大。

另外，Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv，我们只要引用 Moernizr.js 文件，IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等，也可以使用 CSS 对它们进行样式化。

posted on 2014-12-21 11:17  StevenX1987  阅读(433)  评论(0)  编辑  收藏  举报

导航