哆啦A夢欺騙了你！瀏覽器CSS3測試遭質疑

首先，說明，此處只是告誡各位參與CSS3.0學習使用或者將要使用或者學習CSS3.0的朋友，不要完全信任網絡資源，依靠網絡資源，我們需要利用網絡資源的方便和可取的部分，結合自己的理解，學好，理解好！

當然，個人不敢妄加評論網絡牛人，只是秉着一份真誠的心，抱着學習的態度看待問題，大牛們，你們怎么看！

之前瀏覽器之家有報道過日本牛人編寫的一個瀏覽器對CSS3支持的哆啦A夢演示。在該演示中，IE全滅， 甚至可以說是慘 不忍睹。Chrome支持得相當完美。 實際上，不管Firefox也好，IE也好，瀏覽器都有很多獨有的特性，要寫一個其他瀏覽器不能渲染的頁面太容易了。在演示CSS標准的時候使出這招，不給出任何說明，不知道高手們怎么看待這個問題。

在 Chrome 下支持最完美

這個相當有趣的實驗，一方面讓Webkit瀏覽器揚眉吐氣了一番；另一方面也顯示出IE的殘缺。但最近有人對這個測試表示懷疑，指該測試使用了偏向性代碼，測試的CSS代碼偏向於支持Chrome，Safari等Webkit瀏覽器。下面是圖解說明：

 各個內核瀏覽器效果對比 

 相當悲劇的IE家族

上面兩張圖是這個CSS3瀏覽器測試頁面的測試結果，從近一年來的瀏覽器內核大戰的角度來看，此網頁所表達的意思就是：使用Webkit引擎的Safari和ChromeCSS3的支持最好，Firefox其次，因為Firefox無法實現CSS3的動畫效果（即哆啦A夢的眼睛移動動畫渲染失敗），其他瀏覽器CSS3渲染的表現則很差。但事實真的是這樣嗎？

我們查看下這個演示的源碼，會發現有很多針對特定瀏覽器內核編寫的代碼：

下面是實現哆啦A夢眼睛轉動的部分代碼：

div.black_eye{
	position:absolute;
	width:15px;
	height:15px;
	border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	background:#333;
	z-index:21;
		-webkit-animation-name: cate;
		-webkit-animation-duration: 10s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: 200;
}

最后一段居然是  Webkit 特有代碼

注意圖中，-webkit- 開頭的屬性。就是哆啦A夢的黑色眼睛部分的CSS3移動特效，據聞這是被指定了webkit 內核only，即只有使用webkit 內核的Chrome和Safari可以使用。IE之類默認根本就不支持這個特性，其結果可想而知。

實際上，不管Firefox也好，IE也好，瀏覽器都有很多獨有的特性，要寫一個其他瀏覽器不能渲染的頁面太容易了。在演示CSS標准的時候使出這招，不給出任何說明，不知道高手們怎么看待這個問題。

當然我們也能看到在其他CSS代碼部分，比如face部分，也給出了針對Mozila和一般處理方式的代碼，唯獨上面的眼睛處，只看到webkit 內核指定。

#face{
	position:relative;
	width:310px;
	height:300px;
	border-radius:146px;
		-webkit-border-radius:146px;
		-moz-border-radius:146px;
	background:#07beea;	
	background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));	
	background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
	border:#333 2px solid;
	top:-15px;
	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
	
}

網友反饋：因為IE不支持這類型的代碼，即使假設出同類型的代碼，IE還是不能支持，這種專有的以內核開頭的代碼，是特定瀏覽器在CSS標准沒有統一之前為了各自實現CSS3效果也編寫的。但IE系列，無論怎么編寫，使用什么代碼，因為內核問題還是解析不了。

Tips:
解釋下關於瀏覽器獨有的CSS特性：
比如Mozilla瀏覽器支持一些擴展的CSS是以-moz開頭的。這些措施包括了一些功能，包括圓形邊界，並能夠指定不同的方塊的寬度和高度的計算，在非標准方式下，這種css在Mozilla瀏覽器下執行計算更容易得到支持。

最后再次說明：網絡上不乏有厲害的大人物，我們只需要借鑒，不覺得的信任，但是卻又要學取別人的長處，這才是真正的好的學習態度。