CSS漸變定義的順序是否重要？

最近我一直在閱讀很多關於CSS3漸變的內容，我很好奇供應商前綴定義的順序是否重要。例如，我看到很多下面的：CSS漸變定義的順序是否重要？

background: #0A284B; 
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), 
                  to(#135887)); 
background: -webkit-linear-gradient(#0A284B, #135887); 
background: -moz-linear-gradient(top, #0A284B, #135887); 
background: -ms-linear-gradient(#0A284B, #135887); 
background: -o-linear-gradient(#0A284B, #135887); 
background: linear-gradient(#0A284B, #135887); 
filter: progid:DXImageTransform.Microsoft.gradient 
     (startColorstr='#0A284B', endColorstr='#135887');

不過，我也有時會看到的CSS梯度定義的例子，其中過濾器的聲明是朝上方，或其他人還包括-MS-過濾器前綴，等等，等等

所以我想我的問題是：

是否定義的順序有關係嗎？
我應該使用-ms-過濾器前綴嗎？

據我所知，只要正常的背景聲明是第一個，W3C官方的線性梯度是最後一個，沒關係。

我應該注意到我專注於上面的線性漸變，但我認爲同樣的問題也適用於徑向漸變。

來源

2013-06-05 HartleySan

前綴*的順序可以*取決於屬性/值。某些版本的Opera（Presto）將webkit的前綴屬性替換爲它們自己的前綴屬性或標準屬性，具體取決於Opera支持的屬性。我讀過Firefox手機也一樣（無法找到源代碼），但不是桌面版本。 – cimmanon

在處理前綴CSS時，定義的正確答案始終將前綴版本放在第一位，後面跟隨未加前綴的版本。

因此-webkit-whatever和-moz-whatever必須在普通舊whatever之前，並且必須指定普通的前綴不變的版本（即使它尚未被任何瀏覽器支持）。

這很重要，因爲瀏覽器識別的最後定義的版本是使用的版本，如果瀏覽器理解它，則最好使用未加前綴的「標準」版本。

以上未加前綴的版本，個別前綴版本像-moz-，-webkit-秩序等一般是不重要的 - 任何給定的瀏覽器應永遠只承認其中之一，所以不管什麼其他的他們對此的一個普遍的答案是把它們放在長的順序中，因爲它看起來很整齊，但實際上並不重要。

我在上面的段落中強調了「應該」，因爲有些情況下，某些瀏覽器（例如Opera）實現了-webkit-前綴，即使它們有它們自己的-o-前綴。這是因爲人們並沒有使用前綴-o-，他們認爲即使他們的瀏覽器確實支持某些網站，但他們仍然在功能上失利。出於這個原因，我寧願先定義-webkit-，以便在這種情況下，瀏覽器自己的本地前綴可以優先。

關於舊IE使用filter或-ms-filter風格而不是標準的樣式，這也不重要，因爲如果IE使用過濾器，它不應該使用標準CSS。

即使IE確實承認filter和標準CSS，它仍然沒有關係的順序，因爲它們被視爲單獨的樣式。將CSS放入特定順序的目的是讓瀏覽器選擇一個，但filter不會覆蓋background，也不會覆蓋它，即使它們在做同樣的事情，所以它是不相關的。

有一些情況下，這些都可以發生衝突 - 例如使用-ms-filter和標準transform:rotate()一起將導致IE9做旋轉做都，進而使亂七八糟的東西。 IE < = 8只知道-ms-filter，IE10根本不支持-ms-filter，所以只有IE9受到影響，但這是一個討厭的問題，因爲在純CSS中沒有辦法避免它。一個人不得不求助於瀏覽器特定的代碼或者CSS hack或者polyfill腳本。但是這一點不適用於漸變，因爲IE9不支持CSS標準。

來源

2013-06-05 15:30:36 Spudley

在漸變的情況下，支持webkit前綴變得非常必要，因爲許多作者也無法提供背景色。如果文本顏色設置爲白色並且父元素爲白色，則存在可用性問題。 – cimmanon

@cimmanon：是的。 CSS前綴...感嘆。整個概念可以概括爲「通往地獄之路的良好意願」。 – Spudley

很好的答案，Spudley。非常感謝。另外，感謝您的補充評論，cimmanon。我猜測結論是，對於漸變，-webkit前綴應該首先出現，-webkit-gradient-before -webkit-linear-gradient（因爲-webkit-gradient比較老），然後將最長的其他前綴組織起來最短。最後，過濾器和-ms-過濾器可以添加到與背景圖片相關的任何地方，因爲它們不會相互覆蓋。謝謝。 – HartleySan

CSS漸變定義的順序是否重要？

回答

相關問題