css - 基于供应商的 CSS3 与标准 CSS3 语法的排序

Question

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

例如，让我们看这里

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

这应用浏览器特定的 border-radius 然后回退到标准方法，后者有望被忽略，但仍然如此。

同样，调换顺序

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

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

排序有什么不同吗？可能是性能方面的，也可能是其他方面的。

Answer 1

Now, this tries standard syntax first and then falls back to browser based extension.

这可能是误导性陈述。兼容的浏览器将首先尝试标准的无前缀属性，但是如果它也除了标准之外还支持带前缀的属性，那么它也会应用该前缀。这通常会导致标准声明被带前缀的声明和浏览器对该属性的潜在非标准实现覆盖，从而违背了最初将标准属性放在那里的目的。

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

如果浏览器实现了前缀而不是标准，那很好，但如果它实现了两者，您要确保它使用标准来代替。您可以通过最后声明标准属性来做到这一点。

---

¹ _{据我所知，这不是规范规定的，因为就规范而言，供应商扩展是非标准的，因此无法描述它们的实现.虽然syntax of vendor prefixes规范中有描述，具体实现完全由供应商自行决定。}

_{然而，大多数浏览器开发人员在实现待标准化属性或规则的前缀版本时都同意，始终将前缀版本和非前缀版本视为彼此的别名。}