Ordering in vendor based CSS3 Vs Standard CSS3 syntax

Question

In order to achieve cross-browser compatibility, we tend to use both vendor specific extensions and standard CSS3 syntax. I know CSS3 is still in draft, but we have already started using it. But the question is, does the order of where they occur matter very much?

For example, lets see here

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

This applies browser specific border-radius and then falls back to standard method, the later will hopeful be ignored, but still.

Similarly, switching their order

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

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

It there any difference caused by the ordering? May be in terms of performance or else.

Answer 1

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

This may be a misleading statement. A compliant browser will try the standard unprefixed property first, but if it also supports the prefixed property in addition to the standard, then it will apply that prefix as well. This usually results in the standard declaration being overridden by the prefixed declaration and a browser's potentially non-standard implementation of that property, defeating the purpose of having the standard property there in the first place.

The reason why you should declare the unprefixed property last is because that's how properties cascade in a rule: a browser will always use the last applicable one. Prefixed and unprefixed versions of a property are treated as the same property with respect to the cascade, so you want a browser to do its best to adhere to the standards when applying that property. ¹

If a browser implements a prefix but not the standard, that's fine, but if it implements both, you want to ensure it uses the standard instead. You do this by declaring the standard property last.

---

¹ _{As far as I'm aware this is not dictated by the spec, because as far as the spec is concerned vendor extensions are non-standard and so their implementation cannot be described. Although the syntax of vendor prefixes is described in the spec, implementations are left entirely up to the discretion of vendors.}

_{However it's an agreed-upon convention by most browser developers when implementing prefixed versions of a to-be-standardized property or rule, to always treat both prefixed and unprefixed versions as aliases of each other.}

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

Answer 3

The order of prefixes doesn't matter, as long as you keep the future standard version as last.

If a browser drops support for the prefix, it will simply ignore the rule and execute the standard version.

ps: same as AK but simpler, so you don't have to read all pages.