Imagination is our power

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:

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

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.

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.

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.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: