Question

当CSS属性/值被用作与某些CSS3属性/值不兼容的浏览器的“后备”时，它的放置是否重要？

例如，the CSS3 calc() function only works with certain browsers。假设我想要一个宽度为其父级的1/3的div。我可以使用width:calc(100%/3)来实现与calc()兼容的浏览器。然后，对于不兼容的浏览器，我可以使用width:33.33%作为后备。

我的问题：将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() */
}

Answer 1

是的，订单很重要。浏览器将使用他们理解的最后一个规则，因此您的第二个示例将取消对理解它的浏览器的calc（）调用。

正如W3所述：

......如果两个声明具有相同的权重，起源和特异性，那么后者指定胜利。

Answer 2

是的，重要的是，应该先放下“后备”。

原因：浏览器将仅应用最后支持的声明样式，因此，例如，如果您有：

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

...仅适用100px。当涉及供应商前缀时，这很常见：

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

在这种情况下，如果受支持，Mozilla浏览器将应用标准 property，否则将回退到特定于供应商的-moz-property（如果支持的话）。供应商前缀的实际顺序无关紧要，因为浏览器通常不支持多个供应商前缀。

当CSS属性/值用作后备时，它的位置是否重要？

2 个答案: