特定于供应商的 CSS 声明的排序
我想我现在已经写了一千遍类似以下的内容:
.foo {
border-radius: 10px; /* W3C */
-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Webkit */
}
但直到现在我才考虑过这些顺序是否重要?我知道 -moz-*
和 -webkit-*
之间并不重要,因为最多会读取其中 1 个,但是它更好吗(就面向未来等而言)首先还是最后制定 W3C 标准?
I think I've written something like the following a thousand times now:
.foo {
border-radius: 10px; /* W3C */
-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Webkit */
}
But only now have I thought about whether the ordering of those is important? I know that between -moz-*
and -webkit-*
it doesn't matter, since at most 1 of those will be read, but is it better (in terms of future-proofing, etc) to do the W3C standard first or last?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
毫无疑问,最佳实践是将无前缀属性放在最后:
-webkit-border-radius
和border-radius
中最后一个将被使用。-webkit-border-radius
是“实验性”属性 - 实现可能包含与规范的偏差。 border-radius 的实现应该与规范中的内容相匹配。最好在可用时使用 W3C 实现,以帮助确保所有支持它的浏览器之间的一致性。
The best practise is undisputedly to have the unprefixed property last:
Whichever is last out of
-webkit-border-radius
andborder-radius
will be the one that's used.-webkit-border-radius
is the "experimental" property - the implementation may contain deviations from the specification. The implementation forborder-radius
should match what's in the specification.It's preferable to have the W3C implementation used when it's available, to help ensure consistency between all the browsers that support it.
订购很重要。为了让您的代码面向未来,您需要将 W3C 规范放在最后,以便级联优先于供应商前缀版本。
例如,假设 Google Chrome 将来支持
border-radius
,但它也支持-webkit-border-radius
以向后兼容其先前版本。现在,当 Chrome 遇到这个.foo
类时,它会首先看到 -webkit,然后会看到标准,并且默认为标准(并忽略 webkit)。Ordering is important. To future proof your code you need to make the W3C spec come last, so the cascade favors it above the vendor prefixed versions.
For example, lets say down the road Google Chrome supports the
border-radius
, but it also supports the-webkit-border-radius
for backwards compatibility with its prior versions. When Chrome encounters this.foo
class now it will first see the -webkit, then it will see the standard, and it will default to the standard (and ignore webkit).