CodeinWP CodeinWP

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

The CSS3 Dream vs. The CSS3 RealityCreating 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, 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.

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.

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.

Update (March 9/2011): As pointed out be Lea Verou in the comments, I shouldn’t have been so hasty to label Opera’s usage share as “meaningless”. If you’re considering mobile, then it’s much more important. And many countries in the world outside of North America have high usage stats for Opera. Nonetheless, this is an article about CSS (which is generally not crucial), so if you’re willing to give IE6 a degraded experience (a usage share of 4% worldwide) then you should have no problem giving Opera (a 3% share worldwide) a somewhat degraded experience.

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.

39 Responses

  1. Beware about flexbox, the editor’s draft of the spec has changed today and does no longer reflect the current implementation available in Firefox, Chrome and Safari. Those implementations are based on the current public Working Draft of the spec : http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

  2. I can’t wait to start using more CSS3, right now it seems you have to step lightly to avoid breaking IE.

    In my opinion it’s ok to let it be a little ugly and warn the user it’s because of their browser.

  3. Bogdan Pop says:

    “Features Supported by All Modern Browsers Except IE9”
    Who said that IE 9 is a modern browser? Just because it was released a few days / weeks back doesn’t put it in the modern category. It is still IE after all. The modernness of a browser isn’t defined just on how many features it packs or standards it complies to.

    • Bogdan,

      You need to use a different word to describe what you’re saying. According to dictionary.com, the word “modern” is defined as:

      1. of or pertaining to present and recent time; not ancient or remote: modern city life.

      2. characteristic of present and recent time; contemporary; not antiquated or obsolete: modern viewpoints.

      IE9 falls well within that definition. Now, whether or not IE9 is “keeping up” with the other “cutting-edge” browsers, is debatable. I think everyone should read this post to see Microsoft’s understanding of what is expected of a modern browser.

      Saying that IE9 is not “modern” is like saying the year 2011 is not a modern year.

  4. I’m pretty sure that the current stable release of Firefox (3.6) doesn’t yet support transitions. FF4 does but it’s still in beta at time of writing.

  5. forgot the ie is a bad thing

  6. This is very useful. Much appreciated.

  7. Derek says:

    Read Hardboiled Web Design, embrace the fact that browsers are different, and use as much CSS3 as you can.

    Otherwise, you’re going to be left behind.

    • My copy is being shipped as I write this. :)

      One thing you should keep in mind, however, is that Andy Clarke is not a front-end engineer. From what I can see, his investment in web design is apart from performance issues (but I’ll have to read the book before I say anything definite here). I think a more balanced approach is appropriate, instead of saying “use as much CSS3 as you can”. If something is going to cause performance issues, and is going to make 60% of your users scratch their heads (read: lack of functionality in IE) then you have to question whether it’s worth it.

      Don’t forget that 10 years ago, Flash developers were pretty much saying “use as much Flash animation as you can” (but not in so many words).

      But I’m definitely looking forward to reading Andy’s book.

      • Jim Lockwood says:

        I have to agree with Louis here. Web design is about the experience for the user and not the developer. Like any similar endeavor, we have to know our audience. If that audience is heavily IE dependent, then we have to be sure their experience meets our objective. That sometimes means coding to the frustrating demands of their browser.

        On the other hand…I want to use as much CSS3 as possible, so my heart is with you, Derek, but my mind says otherwise.

        • It should also be noted that using a lot of CSS3 is not the same as using a lot of JavaScript, so it may not be as much of a problem as maybe I was implying. But yes, balance is needed.

          And let’s not forget that by using rounded corners and drop shadows for 40% of our users, while giving square corners and no shadows to the other 60% is not very good for branding and overall image. So again, consider the pros and cons, don’t just assume that developer tricks and eye candy are going to benefit the audience. That’s what happened with Flash 10 years ago, and we’re still mocking those superficial intros today.

  8. kaidez says:

    If you want use CSS3 and/or HTML5 on your site while “progressively enhancing” things, both the Modernizr and CSS3Pie JavaScript libraries can help. They certainly won’t solve every problem, but will help.

  9. David says:

    Very useful. Thank you!

  10. enumag says:

    Multiple Columns is (will be) supported in Opera 11.1.

    Also @font-face in IE 6-8 is only partially supported as it needs different format and doesn’t support some advanced stuff (like bold and italic variants of a font).

    Both should be added to the article. ;)

  11. Tonttu says:

    Here’s a good read about flexbox from Jan. 2011: CSS3 Flexbox vs A Princess Bride

  12. henri256 says:

    I have used flexbox. It doesn’t seem to allow boxes to adjust their vertical length to the box with the longest length. So, if it is really the case, for me, this function is pretty much useless, since the purpose of it is mostly to make 2, 3, or 4 columns layouts. And one of the main problem with layouts made with floats is this one (having all the columns adjusting vertically with the longest one).

  13. Lea Verou says:

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

    O RLY? You’ll have quite a few problems on mobile then, where Opera has the highest market share worldwide. (http://gs.statcounter.com/#mobile_browser-ww-monthly-201002-201102)
    And even on desktop, it’s not that meaningless, it’s higher than or equal to Safari in every continent except North America and Oceania.

    • Lea, thanks for your feedback. I detect a bit bitterness in your comment. I have no problem correcting what I said, but I don’t think it was all that far from the truth.

      Mobile usage vs. desktop usage is about 95% vs. 5%. I know some stats seem to put that figure higher in favor of mobile, but even if it is, it’s not that much higher. If Opera’s mobile share is 21% of that 5%, then that’s just over 1%. If you add that to Opera’s desktop usage share, which is 2%, then we have a grand total of 3% usage worldwide. And that’s besides the fact that Opera’s mobile share has dropped considerably over the past year.

      Two other factors that we need to consider here are (1) what people expect on a mobile browser, and (2) the fact that this article is about CSS (not something that is crucial to functionality like JavaScript or HTML5 or its related technologies). So, with all of that in mind, I don’t think it’s all that big of a deal to say that Opera’s share is somewhat meaningless. I think the only mistake I made in the article was when I implied that Safari’s usage share is meaningful, which I don’t think it is.

      I’m wondering though — are you just as vocal in promoting support for IE6 as you seem to be about Opera? I have a feeling you’re not. IE6 has a very large market share in China, India, and Pakistan, to name a few.

      Of course, mobile usage (and Opera’s usage share on mobile) is rising (and IE6 usage is dropping). So I fully expect to pay much closer attention to support on mobile, but I think there are more important areas to do that in than CSS.

      Nonetheless, I appreciate your comments here, and I am going to correct the wording of that portion of the article. I do like Opera, and I think they’ve had a very good browser for a very long time, and deserve a little more respect than I’ve given them in this piece. :)

  14. Trey says:

    Little late with this, but…
    inaccurate. You can’t tell me that firefox 4 supports multi-column layout. Sure, it’s got some…but only half. They leave out features like break-before/after that are really necessary to do anything advanced, anything beyond making a simple paragraph flow in columns. That’s not my definition of support. I’d love it if you told me I was wrong. Otherwise, be more specific.

    • Good point. I’ll look into that and add a note. Thanks.

      Unfortunately, it’s not easy to keep up with all the different levels of support in each version, but that’s why comments are open here, so that people can help round things out with corrections and additions.

  15. You forgot to mention support for CSS3 Marquee. It works in WebKit browsers using the experimental property names, but I don’t think it works in Firefox.

  16. charlie says:

    Great! Thank you for keeping us posted.

  17. Stevey says:

    Great Cheers

  18. Alex says:

    I’m pretty much a beginner here but I’d really want to know why are those brosers (IE6-8) not supporting many CSS3 innovations. Is that somehow beneficial for them?

    • Because those browsers were released before most CSS3 features were even invented. And those browsers don’t “auto update” their new features, so they’ll never get upgraded to have support.

      • Kenneth says:

        And what makes it a bigger problem is that people who buy PCs with Windows pre-installed pretty often don’t really bother to install another browser because they already have IE. Thankfully, the latest version of IE (e.g. 9) seems to be doing a better work but still it’s a far cry from perfect.

  19. mounir says:

    Hi !
    If no mistake, Firefox 3.6 doesn’t exist anymore since Mozilla decided to automatically update 3.6 to 12.
    I guess it’s the same deal with old Chrome versions since Google auto-update every Google Chrome user each time a new version is released.

    • You’re partly right. FF3.6 has very very low usage now, but that browser did not auto-update, so it still might be a concern for some people, depending on the usage share. Probably not, but each developer should decide based on stats for the project in question.

  20. issam says:

    Hello nice work i searched for some similar but this helped me too.
    Only one thing i miss there is a good sandbox browser “Maxthon Cloud Browser”. Within this Browser it would be the perfect list for the CSS3 Browsersupport.

  21. As of 06-21-2016 I find that IE11 does not support FlexBox.
    Microsoft Edge does support FlexBox 2 colum.
    great website, I am a minimalist myself.

  22. majany says:

    some problem with mozilla but thanks for the code

  23. dreamworks says:

    this subject make me angry really ,when i change something in my css file the execution it’s not the same in all browser whay?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).