訂購的供應商特定的CSS聲明

Question

我想我已經寫了類似如下的一千倍現在：

.foo { 
    border-radius: 10px;   /* W3C */ 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
} 

但只有現在我想到這些的順序是否很重要？我知道-moz-*和-webkit-*之間的關係並不重要，因爲最多隻會讀取其中的1個，但是它是否會更好地執行W3C標準的第一個還是最後一個（在未來驗證等方面）？

Answer 1

最好的做法毫無疑問是有最後的前綴的屬性：

.foo { 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
    border-radius: 10px;   /* W3C */ 
} 

無論是最後出來的-webkit-border-radius和border-radius將是已使用的一個。

-webkit-border-radius是「實驗」屬性 - 實現可能包含與規範的偏差。 border-radius的實現應該與規範中的內容匹配。

最好在可用時使用W3C實現，以幫助確保支持它的所有瀏覽器之間的一致性。

Answer 2

排序很重要。爲了將來驗證您的代碼，您需要使W3C規範最後成爲可能，因此級聯優先於供應商前綴版本。

.foo { 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
    border-radius: 10px;   /* W3C */ 
} 

例如，讓我們說下谷歌Chrome支持border-radius的道路，但它也支持-webkit-border-radius用於向後與先前版本的兼容性。當Chrome現在遇到這個類時，它將首先看到-webkit，然後它將看到標準，並且它將默認爲標準（並忽略webkit）。