订购特定于供应商的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 */
}

例如，我们可以说谷歌浏览器支持border-radius，但它也支持-webkit-border-radius向后兼容其先前版本。当Chrome遇到这个.foo类时，它将首先看到-webkit，然后它将看到标准，它将默认为标准（并忽略webkit）。