I recently read Stunning CSS3 – A Project Based Guide to the Latest in CSS and we had a great discussion about CSS3 and CSS Best Practices at our last engineering lunch. This post is an attempt to distill that discussion to your screen.
CSS3 is a module based extension of CSS 2.1. You can check the current status of the modules at W3.org CSS Current Work. The break-up of CSS3 into modules enables browsers to implement parts of the specification and test them out until they reach a general consensus and it becomes a Candidate Recommendation.
This is the reason for browser prefix properties, for better or worse. Best practice is to always leave the syntax that will become the Proposed Recommendation as your last rule.
-moz-transition: background-color .3s;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
-ms-transition: background-color .3s;
transition: background-color .3s;
When the module hits 'Candidate Recommendation' or higher the specification will be pretty locked down and the correct syntax should be last. This prevents deprecated, but still supported, browser prefix implementations from overwriting the correct behavior. Also, use css3please.com to help decrease the amount of typing you have to do for all the browser versions.
Overview of Benefits
- Reduced developing/maintaining time (Less images, No flash to update)
- Increase page performance (smaller page size)
- Increase usability/accessibility
- Enhance search engine placement
Modernizr has an html5 shim for HTML5 element support in older browsers, and the the ability to load polyfills dynamically via yepnope as well as feature detection. It makes your life easier.
Part 2 to follow with a deeper coverage of some of the best parts of CSS3 that you can use now and polyfills for older browsers. Alongside a more in depth coverage of the benefits and how to present to your boss or clients why CSS3 is better for their site than using images/js to support older browsers.
Update: read CSS3/Best Practices Part 2.