特定于供应商的 CSS 声明的排序

发布于 2024-11-30 08:57:39 字数 337 浏览 0 评论 0原文

我想我现在已经写了一千遍类似以下的内容:

.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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

天暗了我发光 2024-12-07 08:57:39

毫无疑问,最佳实践是将无前缀属性放在最后:

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

-webkit-border-radiusborder-radius 中最后一个将被使用。

-webkit-border-radius 是“实验性”属性 - 实现可能包含与规范的偏差。 border-radius 的实现应该与规范中的内容相匹配。

最好在可用时使用 W3C 实现,以帮助确保所有支持它的浏览器之间的一致性。

The best practise is undisputedly to have the unprefixed property last:

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

Whichever is last out of -webkit-border-radius and border-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 for border-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.

温柔戏命师 2024-12-07 08:57:39

订购很重要。为了让您的代码面向未来,您需要将 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)。

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.

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

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).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文