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，費點勁，