css3瀏覽器私有屬性字首使用詳解

schukai發表於2016-01-27
CSSS3瀏覽器

什麼是瀏覽器私有屬性字首

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

 

相關文章