Ordering of vendor-specific CSS declarations

Question

I think I've written something like the following a thousand times now:

.foo {     border-radius: 10px;         /* W3C */     -moz-border-radius: 10px;    /* Mozilla */     -webkit-border-radius: 10px; /* Webkit */ } 

But only now have I thought about whether the ordering of those is important? I know that between -moz-* and -webkit-* it doesn't matter, since at most 1 of those will be read, but is it better (in terms of future-proofing, etc) to do the W3C standard first or last?

Answer 1

The best practise is undisputedly to have the unprefixed property last:

.foo {     -moz-border-radius: 10px;    /* Mozilla */     -webkit-border-radius: 10px; /* Webkit */     border-radius: 10px;         /* W3C */ } 

Whichever is last out of -webkit-border-radius and border-radius will be the one that's used.

-webkit-border-radius is the "experimental" property - the implementation may contain deviations from the specification. The implementation for border-radius should match what's in the specification.

It's preferable to have the W3C implementation used when it's available, to help ensure consistency between all the browsers that support it.

Answer 2

Ordering is important. To future proof your code you need to make the W3C spec come last, so the cascade favors it above the vendor prefixed versions.

.foo {     -moz-border-radius: 10px;    /* Mozilla */     -webkit-border-radius: 10px; /* Webkit */     border-radius: 10px;         /* W3C */ } 

For example, lets say down the road Google Chrome supports the border-radius, but it also supports the -webkit-border-radius for backwards compatibility with its prior versions. When Chrome encounters this .foo class now it will first see the -webkit, then it will see the standard, and it will default to the standard (and ignore webkit).