css - 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.}