Search code examples
csscross-browservendor-prefix

Why put the non prefixed css3 property last?

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?

Solution

  • 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.