Browser Support for CSS3: What’s the Current Status?

Creating a website with HTML5 and CSS3 without having to worry about using techniques like progressive enrichment and polyfills is the ultimate dream for modern-day front-end developers.
But unfortunately, mainly because of the widespread use of IE6-8, that is still just a distant dream. But it is getting closer.
I thought it would be a good idea to summarize where CSS3 stands as far as browser support goes, so you can feel comfortable making decisions about what to use or abuse when incorporating CSS3 into new projects.
This outline will be divided up into sections beginning with the safest CSS3 features to use, and going down the list towards the not-so-safe. Of course, in all cases, you have the option to declare fallbacks and polyfills that will give nonsupporting browsers a similar and/or acceptable experience. Just remember to take care that your content is accessible and your brand isn’t negatively impacted by any design decisions you make. Also, for the purpose of this article, I’m only taking into consideration A-Grade browsers.

First: IE6, IE7, and IE8

As many of us know, with respects to CSS3 support, the only real problem browsers are older versions of IE. I’m not going to bother including those in the overall comparisons, so I’ll just summarize their support of CSS3 here.
The only properties and features supported by IE6-8 are:

• word-wrap
• Linear Gradients using a non-standard filter on elements that have layout (this actually works pretty well, although not being standard)
• Some Transforms using proprietary filters. You can use this tool to generate the values for you for supported functions
• Opacity is not supported natively, but there are legitimate nonstandard alternatives
• @font-face
• Some other less-common CSS3 properties are supported by IE6-8 (like writing-mode), as outlined here

There are other ways to get pre-IE9 versions of IE to mimic certain aspects of CSS3. Some can be found in this post I wrote for Smashing Magazine (which is somewhat outdated now) or on the polyfills page. Remember that most of those alternative methods for getting IE to behave can cause performance and maintainability issues, so use with caution, or just give IE a less-than-optimal fallback.
Also, IE6-8 have some level of support for CSS3 selectors, which can be seen here. Finally, to get many CSS3 selectors and pseudo-elements to work in IE6-8, you can use Selectivizr.
Now that I’m out of breath explaining all of that (and I’m sure you are reading it), let’s get to the meat of this post.

CSS3 Features Supported by All Modern Browsers

There might be some disagreement over what qualifies as a “modern browser”, but I’m assuming IE9, Opera 10+, Firefox 3.5+, pretty much any reasonably recent version of Chrome, and Safari 3+ fall under this category.

• box-sizing (this also works in IE8)
• border-radius
• box-shadow
• RGBA Colors
• HSLA Colors
• Multiple Backgrounds
• background-clip
• background-origin
• background-size
• Transforms
• Media Queries

As a side point in this section, IE9 does provide fairly strong support for CSS3 selectors, pseudo-classes, and pseudo-elements, which you can see here.

Features Supported by All Modern Browsers Except IE9

The stuff listed below is not as safe to use, as it’s not supported by IE9. But if your audience is very low in IE numbers, then you should be fairly safe to use some or all of these.

• text-shadow
• border-image
• outline-offset
• Transitions (Not available in Firefox 3.x; added in Firefox 4+)

Thanks to James for pointing out that the latest Firefox stable release does not include Transitions, but FF4+ does.

CSS3 Features Supported by Firefox, Chrome, and Safari

The stuff listed below lacks support in IE9 and Opera. So basically, these few items are virtually the same as the ones above, since the only difference (Opera) is nearly meaningless due to Opera’s low usage stats.

• Multiple Columns
• Gradients
• Resizing (Not available in Firefox 3.x; added in Firefox 4+)
• FlexBox

CSS3 Features Supported by Chrome and Safari (WebKit)

Finally, these last few features lack support in Firefox, IE, and Opera, so only WebKit-based browsers will see them.

• Keyframe Animations
• text-stroke
  (Doesn’t seem to be in the spec; there’s also a text-outline property that might be cut from the spec)
• box-reflect (Again, does not appear in the spec)

Conclusion

If you can put up with the lack of support in IE6-8, then by all means use some of the strongly-supported stuff listed above. If a client demands things look and function the same in IE, then you can always choose a script-based fallback to fill the cracks (keeping performance issues in mind).
If I’ve left out anything significant, let me know. Keep in mind that this is a list of “new” stuff in CSS3, not everything in CSS3, which technically includes everything in CSS2.1 as well.