Why put the non prefixed css3 property last?

Question

When using vendor prefixes, it’s important to keep in mind the order in which you list rules in your declarations.

I already know how vendor prefixes work and why there are needed, but why is good list the vendor-prefixed property first, and the non-prefixed CSS3 property last? I also checked many important sites and they are using this approach:

.foo { 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px; //why this is the last one?
  }

That's it, why put the actual CSS3 property last? There is a special reason?

Answer 1

With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.

In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.

Answer 2

Useful resource is http://taligarsiel.com/Projects/howbrowserswork1.htm and http://www.w3.org/TR/CSS2/grammar.html, maybe you`ll find your answer there.

Answer 3

Here is a good reason: [summary of this post which Andy mentioned]

During the period where browsers support both the vendor prefixes and the actual property - there might be differences in the implementation of the css rule.

Example:

.not-a-square {
   /* These do totally different things */
   border-radius: 30px 10px; 
   -webkit-border-radius: 30px 10px;
} 

The spec or "real" version will render the top left and bottom right corners at 30px and the top right and bottom left corners at 10px. The vendor prefix will render all four corners with elliptical corners 30px wide and 10px tall.