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+ */

FF4、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