Modernizr.js，~让css兼容性跟历史说再见！(上篇)
什么是Modernizr？
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的 特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
Modernizr 简单易用，但不是万能的。 成功使用 Modernizr 很大程度上取决于你的 CSS 和 JavaScript 技能。
使用HTML 5和CSS 3的主要问题不是普及程度和浏览器之间的差异，而在于首先了解这些差异是什么。一旦搞清楚，开发人员就能够采用优雅降级(graceful degradation)技术解决这些局限性。为此，许多开发人员求助于开源项目Modernizr。
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 类，因此其它的浏览器不会应用这个样式规则。
开始给大家分析那个自己制作页面的心得，
<script src="modernizr-custom.js"></script>首先你要有一个框架，可以在github上进行下载
https://github.com/Modernizr/Modernizr/downloads ，要下载最新的版本哦！
好接下来我们开始进行测试，既然我引入了框架，那我应该如何看到是否成功呢，接下来请往下看
!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>modernizr</title>
<script src="modernizr-custom.js"></script>
</head>
<style>
.div_1{width:300px;height:150px;background:red;box-shadow:5px 5px 5px green;}
.no-div.div_1{boxshadow:5px 5px 5px green;}
</style>
<body>
<div class="div_1">
</div>
</body>
</html>
大家请注意这里面的
<html lang="en" class-="no-js">这里面的
<html class-="no-js">这个东西是 当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情，它还会为 所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。所以，你的<html>元素 可能会变得看起来像下面这个样子：
<html class="js canvas canvastext no-geolocation rgba hsla
multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms csstransforms3d csstransitions video
audio localstorage sessionstorage webworkers applicationcache fontface">这个是在DW里面才会出现的结果，PS 我用的并没有这么一大段代码，
那，，大家看记事本里面就不存在那么一大段代码