订购基于供应商的CSS3与标准CSS3语法

Question

为了实现跨浏览器兼容性,我们倾向于使用特定于供应商的扩展和标准CSS3语法.我知道CSS3仍处于草案阶段,但我们已经开始使用它了.但问题是,它们发生的顺序是否非常重要？

例如,让我们看看这里

-moz-border-radius: 10px;
border-radius: 10px;

这适用于浏览器特定的border-radius,然后回退到标准方法,后者将有希望被忽略,但仍然.

同样,切换他们的订单

border-radius: 10px;
-moz-border-radius: 10px;

现在,这首先尝试标准语法,然后回退到基于浏览器的扩展.

订购有什么不同吗？可能在性能方面还是其他方面.

Answer 1

现在,这首先尝试标准语法,然后回退到基于浏览器的扩展.

这可能是一种误导性陈述.一个兼容的浏览器将首先尝试标准前缀的财产,但如果它也支持除了标准的前缀属性,那么它将应用前缀为好.这通常会导致标准声明被前缀声明和浏览器对该属性的潜在非标准实现所覆盖,从而破坏了首先拥有标准属性的目的.

您应该最后声明无前缀属性的原因是因为这是属性在规则中级联的方式:浏览器将始终使用最后一个适用的属性.对于级联,属性的前缀和未固定版本被视为相同的属性,因此您希望浏览器在应用该属性时尽力遵守标准.¹

如果浏览器实现前缀而不是标准,那很好,但是如果它实现了两者,则要确保它使用标准.您可以通过最后声明标准属性来完成此操作.

¹ _{据我所知,这不是由规范决定的,因为就规范而言,供应商扩展是非标准的,因此无法描述它们的实现.虽然规范中描述了供应商前缀的语法,但实现完全取决于供应商的判断.}

_{然而,这是大多数浏览器开发人员在实现待标准化属性或规则的前缀版本时达成的约定,始终将前缀和未加前缀版本视为彼此的别名.}

Answer 2

在编写 CSS3 属性时，现代智慧是将“真实”属性放在最后，然后将供应商前缀放在前面。

当您确实包含非前缀属性时要考虑的另一件事是将其放在供应商前缀版本之后。当浏览器实现相关 CSS3 规范中指定的属性的标准版本时，您很可能希望它使用该实现，而不是实验性的、特定于浏览器的版本（它可能仍支持向后兼容）。把它放在最后应该确保它将覆盖供应商前缀的实现。