CSS3 - Is It Practical for Widespread Usage?

CSS3 is finally starting to gain some widespread attention. Galleries are popping up everywhere showing off sites that take advantage of CSS3 and experiment with its possibilities. But, at what point does it become practical to use on every site?

We can see by the following chart that CSS3 is gaining traction and supported by a large percentage of browsers -- all except Internet Explorer, of course. Most of the basic functions are at least 80% supported through the browsers, with Internet Explorer failing in nearly every category.

Some of the more basic functions are available using CSS3 and 'hacks' to make Internet Explorer behave like it belongs, such as rounded corners, drop shadows and gradients. There are drawbacks of course for each method, though. Some of these include:

• HTML & CSS that doesn't validate
• Functionality is limited and often not as powerful as the CSS3 natural variants
• Increase in coding time due to all the extra declarations and work-arounds

What do we do? Let's look at an example.

An example would be having a "Call to Action" button. This would be incredibly easy to reproduce using CSS3. A little border-radius, stroke, box-shadow and text-shadow and you're in business. While the effects are pretty subtle, you end up with a nice, simple looking call to action button. There are numerous benefits to making this with CSS3 rather than creating it as an image:

• Portability: You could easily replicate the style throughout the site, quickly, without re-saving new buttons each time.
• Load time: Your sites load time is becoming increasingly important in Google, especially for SEO purposes and general usability concerns. Users like when stuff loads faster.
• Expansion: You can make your text live text. It won't be an image using alternative text, but live text. Not only does this allow you to easily test different call to action phrases, but it makes it so you could quickly, and easily fix typos, make new buttons and overall just gives you a lot more control and less reliant on photoshop.

The drawbacks? Internet Explorer does not support these attributes natively, so we would have to get into all of the IE hacks for the button to look at the same.

But wait, what about the theory of graceful degradation?

"graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of (or one or more faults within) some of its components." -Wikipedia Article on the Fault-tolerant system

This theory applies to web design as well, and is actually pretty simple when we break it down. We have the Call to Action image, which looks nice in 80% of browsers, but what do the other 20% see? Without creating any hacks or work-arounds, they will see a different image. It has all the pros of the other image, but looks slightly different and is missing some of the subtle details. It also experiences none of the cons that you get when using the "hacks" for IE.

What do you think? Is the difference too noticeable? Personally, I'm trying to include as much CSS3, that degrades gracefully, into as many projects as possible, as long as it's not compromising the brand and/or message we're trying to send. I think we're still at least a year away until CSS3 becomes the standard on every website, but I'm focusing on intelligent opportunities to integrate it now without any "side effects."