Blog

CSS3/Best Practices Part 1

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.

The basics:

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.

Example:

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

Progressive Enhancement

When adding CSS3 always beware the browser share of your site and the Internet as a whole. Progressive enhancement is the one of the key tenets when applying CSS3 to your site. You can and have been doing these things with images and Javascript for years and you will have to balance how browsers that don't support CSS3 should look with the benefits of CSS3 for your site. Hint: http://www.modernizr.com/.

Overview of Benefits

  • No Flash/Javascript for effects
  • Reduced developing/maintaining time (Less images, No flash to update)
  • Increase page performance (smaller page size)
  • Increase usability/accessibility
  • Enhance search engine placement

Recommended Polyfills

Just Recommended

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.