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，费点劲，