CSS3 + Progressive Enhancement = Smart Design

“Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before..”

CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to be three general approaches:

* Support all browsers with perfect fidelity – not realistic for most budgets, requires many elaborate workarounds, hacks, etc., also difficult to maintain, upgrade, and extend.
* Support all browsers to some degree – focus first on the latest and greatest browsers, and then go back and make sure that older browsers look and work reasonably well.
* Support newer browsers, forget about the older stuff – make your sites look pixel-perfect on the newest versions of modern browsers and don’t worry about anything else.

Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. In practice, progressive enhancement enables designers to design websites according to some predetermined support baseline and then gradually improve and optimize appearance and functionality to accommodate the most advanced browsers. Closely related to this idea is the principle of graceful degradation, which is what should happen when newer design methods aren’t understood or supported by certain browsers. Consider the following example..

A Quick Example

Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. We would begin with a clean layout that looks and works good in just about any browser. We’re talking basic styles here, stuff like:

* basic layout and composition
* background, border, and font colors
* font families, styles, and transformations
* basic styles for HTML elements
* decorative graphics, link styles and so on

The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. This is a good thing because even visitors using crappy browsers will be able to read and interact with your content. But instead of stopping there, progressive enhancement says, “let’s provide some additional features for people using better browsers.” After all, people using awesome browsers like Firefox, Safari, and Opera want the best experience possible from the Web. Progressive enhancement says, “let’s give it to them, but only after the less-capable crowd has been taken care of first.”
CSS 3 and Progressive Enhancement

Progressive enhancement provides a well-defined strategy for implementing CSS3 into the presentational layer of our designs. Rather than worrying about universal pixel-perfection and trying to accommodate unsupportive browsers with all sorts of filters, hacks, and scripts, we can take advantage of the CSS cascade and deliver styles according to each browser’s capabilities. If IE doesn’t get the whole “rounded corners” thing, then it’s gonna get some square corners instead. Is this a big deal? Only if it interferes with the user’s ability to read and use the content. Is it fair? Heck no, but there is nothing stopping people from upgrading to a better browser (they’re free after all). Meanwhile Safari 4 is gonna rock those rounded corners just fine.

“Progressive enhancement enables us to establish a solid baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers.”

The key thing of course is to begin with a solid baseline design that works well in as many browsers as possible. Once this is done, there is no reason to worry about which browsers support which CSS 3 properties because your site is going to work fine regardless of support. Then, in those situations where some sort of advanced support is desired, you can always go in and fix things up as needed. There are a wide variety of solutions for supporting the latest and greatest CSS3 tricks, including browser detection, proprietary expressions, conditional comments, CSS hacks and other workarounds. Indeed, you can go as crazy as you want to, but the whole point of this article is to explain that you can avoid the fuss by progressively enhancing your site instead.

from Perishable Press