7

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

例如,让我们看看这里

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

这适用于特定于浏览器border-radius的方法,然后回退到标准方法,后者可能会被忽略,但仍然如此。

同样,切换它们的顺序

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

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

排序有什么不同吗?可能是在性能方面或其他方面。

4

3 回答 3

7

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

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

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

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


1 据我所知,这不是由规范规定的,因为就规范而言,供应商扩展是非标准的,因此无法描述它们的实现。尽管规范中描述了供应商前缀的语法,但实现完全由供应商自行决定。

然而,在实现要标准化的属性或规则的前缀版本时,大多数浏览器开发人员都同意约定,始终将带前缀和不带前缀的版本视为彼此的别名。

于 2012-09-21T13:30:06.963 回答
2

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first.

Another thing to think about when you do include the non-prefixed property is to put it after the vendor-prefixed versions. When a browser implements the standard version of a property, as specified in the relevant CSS3 specification, you most likely want it to use that implementation instead of the experimental, browser-specific version (which it will likely still support to be backwards-compatible). Putting it last should ensure that it will override the vendor-prefixed implementation.

See Ordering CSS3 Properties

See also : Remember non-vendor-prefixed CSS 3 properties (and put them last)

于 2012-09-21T10:15:46.003 回答
2

前缀的顺序无关紧要,只要您将未来的标准版本保持在最后即可。

如果浏览器放弃对前缀的支持,它将简单地忽略该规则并执行标准版本。

ps:和AK一样,但更简单,所以你不必阅读所有页面。

于 2012-09-21T13:28:03.900 回答