2 min read

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 对它们进行样式化。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo