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.
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.
- 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.
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/
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.
“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.
there is no “debate” .. it’s not keeping up .. period.
I would agree with that (though we still test for it).
Reminds me of this letter to Microsoft from Mozilla http://people.mozilla.com/~prouget/ie9/
Louis – that was an excellent troll you posted
lol… some people think I’m being intentionally combative or something. I’m really not. I’m just being honest. “Modern” has nothing to do with “feature set” or comparisons.
In fact, I’m in the middle of writing a huge article for another site that will actually be speaking against IE, including IE9, which is now no longer a “modern” browser, but probably was when this article was originally posted (over a year ago).
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.
You’re right, James. I completely forgot about that. The same is true for the
resizeproperty. I’ve added a note to both, and credited you. Thank you.Thanks Louis!
Can’t wait for FF4 it seems to be taking an age…
forgot the ie is a bad thing
This is very useful. Much appreciated.
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.
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.
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.
Very useful. Thank you!
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. ;)
Here’s a good read about flexbox from Jan. 2011: CSS3 Flexbox vs A Princess Bride
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).
Flexbox makes equal-height columns if you set box-align to stretch (the default value).
“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. :)
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.
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.
Great! Thank you for keeping us posted.
Great Cheers
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.
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.
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.
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.
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.
some problem with mozilla but thanks for the code
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?