45

我想我现在已经写了一千遍了：

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

但是直到现在我才想到这些的顺序是否重要？我知道这之间-moz-*没有-webkit-*关系，因为最多会读取其中的 1 个，但是首先还是最后执行 W3C 标准更好（就未来的验证等而言）？

4

2 回答 2

50

毫无疑问，最佳做法是将无前缀属性放在最后：

.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 实现可用时使用它，以帮助确保支持它的所有浏览器之间的一致性。

于 2011-08-16T15:21:41.373 回答
20

订购很重要。为了将来证明您的代码，您需要使 W3C 规范排在最后，因此级联优先于供应商前缀版本。

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

例如，假设 Google Chrome 支持 . border-radius，但它也支持 .-webkit-border-radius以向后兼容其先前版本。当 Chrome 现在遇到这个.foo类时，它会首先看到 -webkit，然后它会看到标准，它会默认为标准（并忽略 webkit）。

于 2011-08-16T15:23:36.907 回答