Modernizr.js，~让css兼容性跟历史说再见！(下篇)
接下来会为大家举一个比较贴切的例子，请看代码
.no-borderradius #c {
border: 5px solid red;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.boxshadow #c {
border:none;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}上面的部分是CSS，大概的意思是说，如果浏览器支持阴影属性，则执行下面，如果不支持阴影属性”no-为前缀” 则执行第二套方案，也就是上面的部分。
<h1 class="borderradius" id="c">121231231</h1>我们现在开始运行一下进行测试，果然效果如图所示。
在火狐 IE9等浏览器是这个样子
看起来跟我们想要的结果是一样的，别急，接下来我们放在 IE6 7 8 这三兄弟下面运行看一看效果
大家请看，在IE6的环境下运行时，是这个样子，刚好验证了刚刚的实验，接着是IE8
IE八运行也是如此的酸爽酷炫，哈哈哈
PS（我的IE7崩溃了暂时用不了，大家感兴趣可以拿着代码自己尝试运行一下，）
个人感觉这个框架的优势不单单是让新手写出优雅的CSS，也摆脱了IE6 IE7 IE8的 *_ _ _ #等CSSHACK私有兼容的写法，而是在于JS部分，本人也是菜鸟一个，这些仅仅是冰山一角，下面给大家列出来关于modernizr.js的CSS兼容类部分，可以参考这来写CSS
CSS 功能
Modernizr 类（属性）
@font-face fontface
::before and ::after pseudo-elements generatedcontent
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow
CSS animations
cssanimations
CSS 2D transformations
csstransforms
CSS 3D transformations
csstransforms3d
CSS transitions
csstransitions
flexible box layout
flexbox
gradients
cssgradients
hsla() hsla
multi-column layout
csscolumns
multiple backgrounds
multiplebgs
opacity opacity
reflection
cssreflections
rgba() rgba
text-shadow textshadow
列举了 Modernizr 使用的类名称以表明对 CSS3 的支持。 如果某个功能不支持，那么相应类的名称用no-作前缀。
Modernizr 使用 JavaScript 检测浏览器所支持的功能，但是，它并不是使用 JavaScript 动态地加载不同的样式表，而是使用非常简单的技术将类添加到页面的标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。
例如，如果页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。如果不支持，那么它用 no-boxshadow 类作为替代进行添加。
由于浏览器忽略它们无法识别的 CSS 属性，因此你可以放心地按照你的基本样式规则使用 box-shadow 属性，然而需要按照下面的格式为旧版本的浏览器添加单独的
.no-boxshadow img { /* styles for browsers that don’t support box-shadow */ }
只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类，因此其它的浏览器不会应用这个样式规则。
下面到了JS部分，容我慢慢跟各位道来，嘿嘿
$(document).ready(function () { if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
} if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});这菊花意思是，如果当前的浏览器不支持圆角属性的话，ID为MyDiv的层就添加CSS-borderRadiusStyle，同理，如果不支持CSSTRANSFORM时候 就添加下面的，貌似仅仅多了一个判断而已，
接下来给大家列一个常用的表单例子，autofocus required 这两个一个是自动获取焦点 autofocus=”autofocus”
window.onload = function(){
var form = document.forms[0],inputs = form.elements;
if(!Modernizr.input.autofocus){
inputs[0].focus();
}在浏览器加时候执行函数，获取表单form 的DOM元素，
如果当前浏览器不支持autofocus的话，执行第一个input表单自动为对焦模式，哪，看起来是不是非常的简单！！
接着进行深入一下
if(!Modernizr.input.required){
form.onsubmit = function(){
var required = [], att val;
for(var i = 0; i < inputs.length;i++){
att = inputs[i].getAttribute('required');
if(att != null){
val = inputs[i].value; //有内容
if(val.replace(/^\s+|\s+$/g,'') == ''){
//如果是空字符串
required.push(input[i].name);
//从队尾不断追加排空为止
}
}
}
if(required.length > 0){
alert('fell'+required.join(','));
return false;
//如果有内容。进行警告，阻止提交
}
}
}
}是不是感觉好大一串代码？我们先来分析一下，
1.首先如果当前浏览器不支持required属性的话，创建一个空数组用来存放表单数据，
2.检测表单内容随后付给元素属性写入数组，
3.检测当前，如果数组内有内容的话， 阻止提交 。
5.如果里面是空的非法字符串，从队尾不断进行追加直到排空为止，不然就是阻止提交
嗯 就是这样，阻止提交+阻止提交=完美！
现在是不是对Modernizr 有了一个大体上的了解？ 给人感觉没有点JS功底或者是纯新手，对这个东西想玩的666，费点劲，