當CSS屬性/值用作回退時，它的位置是否重要？

CSS屬性/值的位置是否被用作與某個CSS3屬性/值不兼容的瀏覽器的「後退」？例如，the CSS3 calc() function only works with certain browsers。假設我想要一個寬度爲其父級1/3的div。我可以使用width:calc(100%/3)來實現兼容的瀏覽器calc()。然後，對於不兼容的瀏覽器，我可以使用width:33.33%作爲後備。當CSS屬性/值用作回退時，它的位置是否重要？

我的問題：將width:33.33%放在width:calc(100%/3)以上或以下是否有效？一個層次結構是否有效，而另一個層次不會

也就是說，將訂購我的CSS屬性是這樣的：

div.column { 
    width: 33.33%; /* Fallback in case the browser does not support calc() */ 

    width: -webkit-calc(100%/3); 
    width: -moz-calc(100%/3); 
    width: calc(100%/3); 
}

要超過命令他們這樣的不同：

div.column { 
    width: -webkit-calc(100%/3); 
    width: -moz-calc(100%/3); 
    width: calc(100%/3); 

    width: 33.33%; /* Fallback in case the browser does not support calc() */ 
}

來源

2013-02-16 JSW189

是，訂單事宜。瀏覽器將使用他們理解的最後一條規則，所以你的第二個例子會否定理解它的瀏覽器的calc（）調用。

由於W3狀態：

...如果兩個聲明具有相同的重量，產地和特殊性，該後者指定的勝利。

來源

2013-02-16 20:35:45 j08691

是的，它是重要的，「後備」應該放在第一位。

的原因：瀏覽器將只應用於最後一個支持聲明的風格，所以如果比如你有這樣的：

div { 
    width: 400px; 
    width: 300px; 
    width: 200px; 
    width: 100px; 
}

...只有100px將適用。當供應商前綴涉及這是常見的：

div { 
    -moz-property: foo; 
    property: foo; 
}

在這種情況下，Mozilla瀏覽器將應用標準property如果支持，並退回到供應商特定-moz-property否則（如果支持）。供應商前綴的實際順序無關緊要，因爲瀏覽器通常不支持多個供應商前綴。

來源

2013-02-16 20:37:49

當CSS屬性/值用作回退時，它的位置是否重要？

回答

相關問題