css3瀏覽器私有屬性前綴使用詳解

什麼是瀏覽器私有屬性前綴

CSS3的瀏覽器私有屬性前綴是一個瀏覽器生產商常常使用的一種方式。它暗示該CSS屬性或規則還沒有成爲W3C標準的一部分。

如下是幾種經常使用前綴

• -webkit-
• -moz-
• -ms-
• -o-
• -khtml-（如今基本都沒有用了，被-webkit-取代）

舉例來講，一個CSS3圓角的代碼是：

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

CSS3前綴+標準代碼的順序

既然CSS3代碼中（暫時）須要寫上這麼多前綴，那麼他們的順序是如何的呢？

一篇文章中詳細分析了代碼順序：ordering css3 properties

結論:是先寫私有的CSS3屬性，再寫標準的CSS3屬性。

-webkit-transform:rotate(-3deg); /*爲Chrome/Safari*/
-moz-transform:rotate(-3deg); /*爲Firefox*/
-ms-transform:rotate(-3deg); /*爲IE*/
-o-transform:rotate(-3deg); /*爲Opera*/
transform:rotate(-3deg); /*爲nothing*/

去掉CSS3前綴

何時咱們能夠去掉一個屬性的CSS3前綴呢？答案是，當一個屬性成爲標準，而且被Firefox、Chrome等瀏覽器的最新版廣泛兼容的時候。

以border-radius爲例：

-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF四、Saf5以及Chrome都支持border-radius屬性了，咱們就沒有必要寫以上兩條了，代碼變成：

border-radius: 12px;

完全甩掉css3前綴

你知道Css3的不少數屬性爲實驗屬性，使用他們的時候得加上各式各樣的瀏覽器前綴。可能你默默忍受了，由於還沒到統一的時間。有沒想過給本身減下 負，偶然間在網上看到一個js解決方案，正好能夠解決這個問題。他會幫你自動識別瀏覽器，生成對應的Css3樣式前綴，這樣你就能夠直接看成標準屬性來使 用了。

引用方式：<script src=」http://leaverou.github.com/prefixfree/prefixfree.min.js」></script>

該js項目地址爲http://leaverou.github.com/prefixfree/。 事物老是有兩面性，帶來方便的同時，也引入了一些問題，由於是基於js的，因此對於一些不支持或者禁用js的瀏覽器用戶是很不友好的，極可能會打亂佈局， 並且有時候會影響你使用Css的一些技巧（好比你只是想針對某個瀏覽器使用某個Css3屬性，因爲這個js的做用，全部瀏覽器都會應用該條屬性，明顯這不 是你想要的結果）

 

 

文章轉載自：問說網 » css3瀏覽器私有屬性前綴使用詳解
本文標題：css3瀏覽器私有屬性前綴使用詳解
本文地址：http://www.uedsc.com/css3-prefix.htm