2016-01-31

Modernizr --- HTML5 和 CSS3 开发利器

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。当你在网页中嵌入 Modernizr 的脚本时，它会检测当前浏览器是否支持 CSS3 的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 input 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于 JS 的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr 还可以令 IE 支持对 HTML5 的元素应用 CSS 样式，这样开发者就可以立即使用这些更富有语义化的标签了。

Modernizr的原理

Modernizr 使用 JavaScript 检测浏览器所支持的功能，但是，它并不是使用 JavaScript 动态地加载不同的样式表，而是使用非常简单的技术将类添加到页面的标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。

例如，如果页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。如果不支持，那么它用 no-boxshadow 类作为替代进行添加。

由于浏览器忽略它们无法识别的 CSS 属性，因此你可以放心地按照你的基本样式规则使用 box-shadow 属性，然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector ：

.no-boxshadow img { / styles for browsers that don’t support box-shadow / }

只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类，因此其它的浏览器不会应用这个样式规则。

Modernizr 的使用

1. 下载

首先从 www.modernizr.com 下载 Modernizr 的最新的稳定版。把它加入页面的区域：

<script src="modernizr-1.5.min.js"></script>

2. 向元素添加 “no-js” 的类

<!DOCTYPE HTML>

<html class="no-js">

当 Modernizr 运行的时候，它会把这个 “no-js” 的类变为 “js” 来使你知道它已经运行。Modernizr 并不仅仅只做这一件事情，它还会为所有它检测过的特性添加 class 类，如果浏览器不支持某个特性，它就为该特性对应的类名加上 “no-” 的前缀。
添加 no-js class 到 html 元素下，是告诉浏览器是否支持 JavaScript，如果不支持就显示 no-js，如果支持就把 no-js 删掉

3. 使用
(a)

1
2
3

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;}
 .no-boxshadow #MyContainer { border: 2px solid black;
}

因为如果浏览器支持 box-shadows 的话，Modernizr 就会将 boxshadow class 添加到元素，然后你可以将它管理到一个相应的 div 的 id 上。如果不支持，Modernizr 就会将 no- boxshadow class 添加到元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持 CSS3 特性的浏览器上使用 CSS3 新功能，不支持的浏览器上继续使用以前的方式。

*(b) 本地存储

Modernizr 除了添加相应的 class 到 html> 元素以外，还提供一个全局的 Modernizr JavaScript 对象，该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码可以用于判断浏览器是否支持 canvas 和 local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的。

<script> window.onload = function () { if (localStorageSupported()) {
            alert('local storage supported');
    }
};

　　function localStorageSupported() {
    　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
    　　}catch(e) {}
   　　 return false;
} </script>

1
2
3

$(document).ready(function () { if (Modernizr.canvas) { //Add canvas code  } if (Modernizr.localstorage) { //script to run if local storage is  else { // script to run if local storage is not supported
   }  }
});

全局的 Modernizr 对象也可以用来探测是否支持 CSS3 特性，下面的代码用于测试是否支持 border-radius 和 CSS transforms:

$(document).ready(function () { if (Modernizr.borderradius) {
        $('#MyDiv').addClass('borderRadiusStyle');
    } if (Modernizr.csstransforms) {
        $('#MyDiv').addClass('transformsStyle');
    }
});

audio 和 video 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。根据 HTML5 规范，空的字符串表示该类型不支持。如果支持该类型，那么返回值是“maybe”或是“probably”。例如：

`if (Modernizr.video.h264 == "") { // h264 is not supported }`