The Importance of Ordering CSS3 Properties

When using CSS3 properties in your designs, it is important to stack them in the right order to future proof your stylesheets for the browsers of tomorrow.

The Modules of CSS3

The origin of CSS3 dates back to over a decade. The first working draft dates back to April 14, 2000, which introduced the idea to modularize the CSS specification. So instead of one giant specification release, CSS3 is broken into modules that will be implemented separately and function independently from one another. Why is that a good thing? Because that means we can start using CSS3 properties as they become available, even if a property is being tested by just a handful of browsers.

Enter Vendor Prefixes

If you're a developer, you've probably used a vendor prefix in your CSS before. If you haven't, you've certainly seen them before in a tutorial or in any number of sites you were peeking behind the curtain at while trying to figure out how to do something. For example, let's say you wanted to round the corners of an element. You could use the CSS3 property border-radius:

.foo {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

In the above example, the -webkit- prefix targets all WebKit browsers (Safari, mobile Safari, and Chrome), and the -moz- prefix targets the Gecko engine (Firefox). Notice that the vendor-prefixed properties are listed before the non-prefixed property. This is the optimal order for listing properties, and here's why. As we all know, CSS rules can override those listed above them. Sticking with the border-radius example, Safari, Chrome, and Firefox browsers currently support the property only through their own vendor-prefixed versions. Opera and IE9+ support the non-prefixed property. Once the property becomes standard in the specification, the non-prefixed version listed last in the stack will override the prefixed-versions listed above it, future proofing your designs so that all browsers will render the styles according to the standard.

comments powered by Disqus