Modernizr.js 介绍

来源：互联网发布：狭义相对论知乎编辑：程序博客网时间：2024/05/23 11:37

- Setting-Up Modernizr
- Working With Classes
- Browser Feature Test
- Modernizrload
- Summary

As of Modernizr 1.5，this script is identical to what is used in the popular html5shim/html5shiv library.

modernizr.js 是和 HTML5Shiv 差不多的，貌似比 HTML5Shiv 好一些，也不知道是不是真的。

html5shiv 主要是针对IE，Modernizr是支持全系列
html5shiv 主要是为IE添加 HTML5 标签支持，而 Modernizr 则是检测浏览器对 HTML5/CSS3 的支持情况，并将结果添加到 html 的 css 中。

官网http://modernizr.com/download/默认是把 html5shiv 勾选的，如果没勾选，下载的版本就没有 html5shiv。

在 jQuery 1.9 发布之前，jQuery 内置了一个 jQuery.browser 函数来检测浏览器的版本，它根据 user agent 来返回浏览器的相关信息。我们可以根据结果得到用户浏览器版本，这样就像打一些补丁一样针对这些老的浏览器做一些fallback 的工作。

可是 jQuery 1.9 发布的时候取消了这一 API (当然你可以使用 jQuery.migrate 插件)，官方文档中解释为我们应该用检测 feature 的方案( jQuery.support )来判断我们需不需要 fallback，毕竟 user agent 伪造太容易了。比如 Chrome Mobile 版本则会加入 Safari 的 user agent，这也是为什么移动浏览器市场Safari雄踞第一的真正原因之一。

本文向你介绍 Modernizr.js 这个类库，可以说它干的事情目的与 jQuery.support 并无二致，但是功能和成熟程度在整个领域都是首屈一指的。

Modernizr 帮助我们检测浏览器是否实现了某个 feature，如果实现了那么开发人员就可以充分利用这个 feature 做一些工作，反之没有实现开发人员也好提供一个 fallback。所以，我们要明白的是 Modernizr 只是帮我们检测 feature 是否被支持，它并不能够给浏览器添加那些本来不支持的 feature。

其实，这个类库使用非常简单，简单到你把官方文档从头到尾看一遍就完全了解它的使用方法了。接下来，我做一点简单的介绍。

Setting-Up Modernizr

在官方网站(http://modernizr.com) 上我们可以看到有两个下载选项，Add your detects 和 Development build 版本。其实它们都会导向同一个下载页面，只不过后者会帮我们把选项预先勾上而已。

通常我们需要检测的新特性基本都囊括在了这些选项中，我们可以根据自己需要，定制化的选择需要检测的 feature。

下载完后我们可以在 <head> 中引用这个类库。由于 Modernizr 帮我们内置了 html5shiv 类库，所以我们必须在 <body> 加载之前引用这个类库。当然你如果针对的是 IE9+ 的浏览器，那么大可以在页面元素加载完后再引入，但这样就会有 FOUC 这样极不友好的效果出现。

最后，我们需要在 <html> 标签中加入 no-js 类，以免浏览器仅用了 JavaScript。

Working With Classes

使用了 Modernizr 后，页面中渲染后的 html 代码是这个样子的：

其中有很多以 no 作为前缀的 class，当然大部分都没有这个前缀。事实上，如果一个类名以 no 作为前缀，比如 no-touch 这表示浏览器不支持 touch 特性。

Chromw 目前是对 HTML5 和 CSS3 新特性支持最好的浏览器，没有之一。

当我们引入了 Modernizr.js 类库后，<html> 标签的 class 属性就会被相应的赋值，以显示浏览器是否支持某类 CSS 属性。比如在 IE6 下面，不支持 borderradius 特性，那么在 <html> 标签中就会出现 no-borderradius 类，我们可以做一些 fallback 的工作：

.no-borderradius div {  /*-- do some hacks here --*/}

Browser Feature Test

检测浏览器是否支持某项特性，我们可以用这种语法：
Modernizr.featuretodetect

Modernizr 对象是类库创建的全局变量，我们可以在页面的任意位置使用。比如我们需要检测浏览器是否支持 WebGL，可以这么做：

if(Modernizr.webgl){  /* support WebGL*/｝ else {  /* not support WebGL*/｝

Modernizr.load()

基于 YepNope.js，Modernizr.load() 根据一些条件判断来动态选择加载 CSS 和 JavaScript，这无疑对避免不必要的资源加载有极大的帮组。

你可以在这里（HTML5 Cross Browser Polyfills）找到几乎所有新特性的 fallback 的解决方案。

Modernizr.load({  test: Modernizr.webgl,  yep: "three.js",  nope: "jebgl.js"}

当浏览器支持 WebGL 的是否，就引入 three.js 这个类库做一些 3D 效果。浏览器不支持 WebGL 的时候可以使用 jebgl.js 做一些 fallback 操作。

还有一个比较酷的例子来自官方文档。我们在用 jQuery 类库的时候，通常都是这种写法：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.s"></script><script>widnow.jQuery || document.write('<script src="js/libs/jquery-1.9.2.min.js"></script>')</script>

现在用 Modernizr.load() 可以这么写：

  {    load: '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.js',    complete: function() {      if(!window.jQuery){        Modernizr.load('js/libs/jquery-1.9.2.min.js');      }    }  },  {    // This will wait for the fallback to load and execute if it needs to.    load: 'needs-jQuery.js'  }]);

Summary

Modernizr 为我们做了最复杂的一步，我们只需要像模块一样将代码组装起来。当然，Modernizr 还有一些其他的用法，比如 Modernizr.mq() 方法用来检测 media query，这对 Responsive Design 可以帮上很多忙。诸如这些 API 在官方文档中都有涉及，建议在使用的时候仔细了解一下即可。

0 0