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

例如,让我们说谷歌Chrome支持它border-radius,但它也支持-webkit-border-radius与其先前版本的向后兼容性.当Chrome遇到这个.foo类时,它将首先看到-webkit,然后它将看到标准,它将默认为标准(并忽略webkit).