If you’re like me, you’re probably wondering, amidst all the hype surrounding the release of IE9 Beta, whether or not Microsoft has finally begun to keep up with the other browser makers.
Has IE9 changed Microsoft’s reputation of always lagging behind? Does the Beta release of IE9 indicate that Microsoft is finally keeping up with the Joneses? You be the judge.
I’ve created a few charts showing CSS3 support in IE9 Beta. The list does not include every conceivable CSS3 property or selector. I’ve tried to stick to the well-known stuff, and I’ve also included a list of pseudo-selectors and pseudo-elements. Most of the information is taken from this page on MSDN.
CSS3 Property Support in IE9
|CSS3 Property||IE9 Support||Previous IE Support|
|CSS3 Property||IE9 Support||Previous IE Support|
UPDATE (Oct. 30/2010) The latest release of the IE9 Platform Preview has added support for 2D transforms using the
-ms- prefix. While this does not yet mean this feature is included in IE9 Beta, it suggests it will be included in IE9’s full release, so I’ve added a yellow checkmark to indicate partial support for now.
p>UPDATE (Jan. 25/11) For some reason I had neglected to include CSS3 keyframe animations in this list, so that’s also listed, although it didn’t really matter since IE9 doesn’t support those kinds of animations.
Support for Some Obscure Properties
The following is a list of more obscure properties and at-rules supported by IE9:
@namespace, text-justify, text-align-last, text-overflow, word-break.
There are a number of other lesser-known properties not listed here that IE has never supported in any version, including IE9.
CSS3 Selector Support in IE9
|CSS3 Selector||IE9 Support||Previous IE Support|
|E ~ F (sibling)||7-8|
Pseudo-Classes & Pseudo-Elements Supported in IE9
Pseudo-Classes/Elements NOT Supported in IE9
Let me know in the comments if anything’s missing.
So what do you think? Is IE9 still left behind in CSS support? Seems that they’re sticking to support of more established CSS3 stuff and are somewhat hesitant to include anything more than what’s supported in other browsers.
No. IE9 is still behind the curve. IE has been behind the curve for 10 years and always will be. No one should be using any version of IE.
Totally agree. Most people seemed to have forgotten their history with browser releases. I think each time a new version has came out they’ve been saying it’ll comply to standards.
Well, I totally agree. Those “standards” were of 1998. Remember, that they were also part of CSS2.1 – that is pretty old for browsers nowadays.
IE9 will never be on the same level as Chromium and others.
Try out some canvas benchmarks. IE supports different (single-targeted) methods awesomely – but the others lack and are at about 5 frames per second.
That sucks! Try to found an OpenSource browser out of Trident Engine. That engine has potential, but Microsoft has not enough employees and not enough time to develop it further.
Oh, I totally agree with you. Internet Explorer eats your babys. It is also responsible for war and starvation in the world. Internet Explorer is evil and will always be, forever and ever. No one should be using IE.
Rob, i am 100% agree with you!
It’ll be same even they’ll release IE20 with their sloppy developing.
Go webkit microsoft. Open source will not eat you.
i have surgically removed IE from every device – hate is a strong word – as a web designer I do loath it so.
I am a webdesigner/programmer myself and I have to admit that I really dislike IE.. The worst thing is that I need to have the browser installed at my computer to check the functionality of my programming in every browser.. If this helps anybody I have done a bit research about WHY Microsoft haven’t done anything about a better browser experience the past years..
Do to Microsoft’s Cloudification and virtulization of everything available at Microsoft, the IE browser has been developed specifically for Microsoft’s newer ideas.. It was a must, that Microsoft programmed the IE browser specifically to work with their current 365 Cloud service and online office pack.. IE has some amazing features if you are 100% Microsoft user and don’t give a shit about Google, Facebook, Twitter etc.
Some of the most beautiful and advanced websites/web applications are unable to work properly in IE due to the fact that Microsoft have their unique IE programming. IE sucks when it has to do with everybody else, but for Microsoft, it is the future step next in line.
am agree dude! IE sucks
No No, Who tells IE is useless browser. A very good example for IE is, it support to download Mozila, Safari, Chrom ETC.
IE is very usefull in todays time.
i totaly agree i do every new system installation :)
Am I reading this right ? They still DON’T support the “opacity” property ? How stubborn can they be ? That’s ridiculous.
At least, it supports RGBA… It’s something.
Actually, it does.
My mistake. IE9 does support opacity, as a few people have pointed out. For some reason it was not listed on that page I referenced (which I assumed was an exhaustive list) so I thought they had just resorted to RGBA or something.
Thanks to those who provided links for reference.
IE had supported opacity in IE7.
IE8+ does not support opacity, only the microsoft-vendor filters with opacity.
According to this link the opacity support in IE9 is a “new feature”.
So I don’t think IE7 ever supported opacity with the “opacity” property. I tested in IE8 in compatibility mode, and a standalone version of IE, and neither supports the opacity property.
IE 7 and 8 both supported it, but only by using this method:
I wrote a tutorial for image fades that uses this method so it works in most widely used browsers.
Of course, but that doesn’t qualify as “support”. That’s proprietary support that has nothing to do with CSS3.
Well at least IE is implementing some CSS3, but it’s not enough, they lack even the simplest things like text shadow.
I’ve looked around, and I found multiple places that state IE9 supports opacity. Here is one from MSDN.
What about :hover on all elements ?
I don’t expect that
:hover on all elements? It was a problem with IE6, fixed in IE7. We’re talking new stuff in IE9 here, not old limitations of IE6. ;)
IE 9 supports opacity. You can try it out here (lower opacity on hover):
Using a lot of CSS 3.0, inluding opacity here as well:
I think it does support opacity.
Yes, I’ve corrected it. The link I had referenced did not include opacity for some reason.
Hello. nice post. Thanks for the post.
Uuuhm… what a crappy Browser :-/
IE9 has still to improve
While it is leaps and bounds ahead of what has been supported in IE versions past, the lack of text-shadow, opacity, border-image and gradients seems very short-sighted.
While not as common as say, rounded corners, I feel like these are all still very common elements that are much simpler to create in CSS than by using graphics. And for all their high-fallutin’ about how great the direct2D API usage is in IE9 you think drawing these elements would have been a cinch.
I can sort of understand the lack of opacity since they probably assume using rgba colors is more “standards-compliant” approach to handling transparency, but opacity still has its uses (and I hate the filter commands IE has used, they are tediously long).
I still do not see border-radius: support in IE9.
Still very square.
That site is a very very bad test. It assumes that browsers would need to support proprietary vendor extensions like -moz or -webkit. IE9 implements border-radius without the vendor extension.
Also, it looks like the IE9 version of border-radious is less buggy than the other browsers. Look at:
Set the border-style to dashed & add a radius. It doesn’t look right in Firefox 3.6.
I think, unfortunately, the bigger issue here is “who cares what CSS3 IE9 supports when 50% of the IE universe is IE6 still?”
that’s the real butterflying problem. I realize there’s reasons, but it still irks me. In 2020 when ccs4 is the new hotness, will 50% of IE users still be on IE9? Will IE X finally support all of the CSS3 spec? Why can’t the CSS rendering engine be updated periodically?
At least they’re trying to bring things up to 2005s finest. I’ll take what I can get.
50 per cent of IE users use IE6? Not quite.
Currently, according to Net Applications, it’s more like 26 per cent of IE users, and 16 per cent of all users. But these numbers are for worldwide market share. Some markets such as China and India, which have a lot of Internet users and a big proportion of pirated WinXP with IE6, push the numbers of IE and IE6 quite high. If you take “local” markets such as North America or Europe, only around 5 per cent of Internet users have IE6, and going down. Some major sites are leaving IE6 behind for new features (YouTube, Facebook).
That is over inflated unless you are talking about a specific website. A quick look at the stats puts IE6 usage around 6-8%. As with any old browser, it takes a really long time to die, they linger around.
But, with IE9 supporting these features, it will be easier to make the pitch to clients for progressive enhancements for box-shadow and RBGA because the current version of all major browsers support it.
And, if IE8 adoption trends continue, then IE8 users will quickly adopt IE9.
Don’t you think its about time we stop supporting IE6 and thus actually getting people to upgrade. I think the web developers are partially to blame for that old piece of software still being widely used ;)
What?! Web developers to blame? I think that’s a little unfair. We support it because our clients insist we do. M$ could do a <i>lot</i> more to help us stop supporting it ;)
Yes, of course M$ is evil and wants that everybody uses a browser 3 versions behind the current one, just because is evil and it is not doing his homework to prevent it’s usage. They want everybody uses a browser that is very good for their reputation…come on if IE6 is still hanging around is because web developers, enterprise companies, etc. don’t want to do the investment to migrate their web applications. I think Microsoft is the last one to be blamed about users stilling using IE6
It still requires you to reboot your computer after you install it.
Nice to see Explorer is finally making their browser compatible for web browsing in the 90’s.
Will the IE9 team look at resolving the rendering issues for CSS 2/2.1? I think you need to walk before you can run….
Are you sure itÂ´s a bug in IE and not in the other browsers? IE 8 is still the most CSS 2.1 compliant browser out there.
Very usefull peace of information in one place, thanx a lot for the effort of gathering all the properties.
I’m very sad there are still no transitions, border-images, text-shadows and multiple columns, those are very usefull. But as someone mentioned, it will still evoluate. Let’s hope those will be supported in next beta versions.
As nick mentionned, the other problem is that IE6 is still out there. Furthermore, IE9 will only be available on vista + seven. When we know that XP was the major concurent of vista (I don’t have figures sorry, I will post them if I find were I read that), we can see where the problem will lay in the next years. IE9 looks promessing, but we will still have to make fallbacks for our nice effects for xp users, even if they will use IE8 :(
Well, wait and see as they say.
No support for text-shadow? That’s nothing short of unbelievable arrogance and laziness on Microsoft’s part. It’s as if they simply don’t care about standards, despite crowing about supporting them all. Geeze …
er, still not supporting all Pseudo classes…thats pretty poor!
Nice article. What about :first-child?
Yeah, I was going to ask the same. What about :first-child? What a shame.
first-childpseudo selector is not CSS3, it’s CSS 2.1. This list is only discussing CSS3.
first-childhas been supported in IE since IE7.
All the checkmark-images in this this post – except the first – have
alt="No". Naturally, that is extremly misleading if images do not load or using a screen reader.
You know what, I was away from the computer and it dawned on me — “Did I remember to change the alt text for the checkmarks after copying and pasting?” I guess not… Thanks, fixed.
Great work and wonderful
Now I can download this version after its support for the most important characteristics of CSS3
Just to give a tip to Microsoft here. People keep clamoring about what IE9 *doesn’t* support. I’d like them to also keep in mind the *thousands* of test-cases they openly released to browser developers (via W3C I believe) in order to fully test (and fix) their visual renderings. For instance, the team found a few places that the KHTML/WebKit team overlooked in border-radius testing (for instance: when using multiple border styles on a single box). So, although Microsoft might not have added features that other browsers have added, they have gone through a much more rigid testing process which I would imagine takes a large amount of time – plus let’s not forget how much of a catch-up game they’re playing.
IE9 is a huge step in the right direction, and their team – of all people – know they’re not done yet by a long shot. I think it’s rewarding to see them still trying to advance and innovate in other areas all the while (such as using the graphics card rendering to enhance the experience). I’m impressed. Whether I’ll use IE9 or not, probably not personally, but for anyone that is still using IE I will be strongly urging them to upgrade.
I, too, am upset over the lack of support for the CSS property of text-shadow though. I’d imagine we could resort to using the proprietary filter if we felt it was a design necessity.
IE’s filter should count in my mind. It may not be ideal, but it works — not much unlike vendor prefixes counting as supporting elements. So like for gradient, I’d say it works.
Just my 2 cents.
IE 8 & 9 do in fact support gradients via ‘filter’…
Yeah it does support them, but if you attempt to use it when using border-radius the gradient ignores the border and shows outside the rounded edges..
To all the “IE does support such-and-such property via a filter” crowd, that’s *not* “support”. Filters pull in a DirectX instance, much like a Flash control in behavior. It slows down page loading, uses more system resources, and can cause a number of rendering issues with things such as z-indexing.
Depends on your definition of “support” I suppose. IE enables many CSS effects through the ‘filter’ property. It is imperfect, and IE should no doubt be avoided by web users (not developers), but it works, and that’s the bottom line. Filters may support one effect or another by a string, but they support nonetheless.
is that true that ie9 dont even support the text-shadow? huh?
so funny. i agree they still behind among other 3 browser. i remember they still clam they ie9 complete standard before the lastest release. really funny that microsoft. Bigger than mozilla, opera, but development speed so slow and somemore say they support webkit.
Hope they wont lies us again, always saying they standard.
IE9 doesn’t support CSS transform and transition. Web applications designed for Webkit looks bad in IE9 without this too.
the flexible box model isn’t supported in ie9 also
No text shadow, are they having laugh?
Seriously, why even bother releasing ie9 while it still lacks support for some of the most basic css3 attributes.
They might as well wave a large banner saying we’re not quite as shit as we used to be but websites will look better load faster cause developers less grief when run through chrome.
Ie9 is a fart in the wind of web progression
s@font-face is a cs3 property? You can user @font-face since IE6 and css2 in other browsers.
There are some CSS properties/rules that are pretty old and well supported, even though they’re CSS3. Here’s what SitePoint’s reference says about @font-face:
IE9 has no support of text-shadow? You must be kidding me IE.
I REALLY hope that changes before it’s released.
Common folks, it’s in BETA. If they still have no support for text-shadows and other now pretty common CSS when they release it. Complain then.
If we complain now, maybe they read this and change it before release? Squeaky wheel gets the oil?
Well. Now it’s released. No simple stuff as text-shadow. Now i’m gonna complain. The sad thing about IE, that the release cycle is like an turtle racing against The Starship Enterprise at Warp 11 comparing the competition.
I’m really disappointed in the new IE version. How did they score so high on the browser tests when they don’t even support simple elements like text-shadow and :before/after?
IE supports the CSS2.1 :before and :after since IE8, but *not* the CSS3 versions ::before and ::after ;)
Whatever it supports in terms of CSS3 is not really the question when users cannot run IE9 unless they are running Windows Vista or Windows 7. Since the lion’s share of Windows’ IE users still run Windows XP, IE9 will not matter much for several more years by which time many more users will hopefully switch to WebKit browsers.
@mediato the list, which IE9 now supports.
no text-shadow what a shame
I am so surprised.After downloading I can’t even see anything in the page.There is a message that indicates that this is not working now and they are trying to fix it.Whats a juke!!
I wish there was more widespread support for transforms, transitions and animations. It must be just as appealing from the vendors point of view, as it is from the developers, to have a syntax specifically for animation.
So i’ve done an html5 with a large range of css3 properties. It works just fine in ie9, and i give a big round of applause to the team developing ie9… HOWEVER i would still like to complain about all the other versions of ie. Y’alllll suckkk! ”…extra work extra work that’s what working with previous versions of ie9beta means…” big time!
Thank you Louis for this detailed report. You saved me some long hours of QA.
Agree IE is way behind most of the current browsers, but there are many IE users. And sadly there are many using versions prior to IE8. Hopefully one of these days they get up to par w/ the rest of the browsers.
Finally, I don’t use IE but is a good news for all designers, I hope css3 will be supported by all browsers.
Even I am a Microsoft Web Developer but having those features like gradient and others missing in IE9 will make me always encourge my clients to use other browsers because developers had enough of this crap browser (IE) for such a big company.
Out of all the browsers to pre install, it had to be the [crappiest].
Filters or no filters, the IE team are still miles behind. It should be everyone’s responsibility to ensure IE6 support no longer exists, since when was it not alright to tell a client “NO, I WONT BE CODING FOR IE6”?
Using Seth Goden’s methodology: Some things are broken for a reason, whether it be marketing, profit or long term commitment. So not fixing IE9 might be the long term plan, break it for the users that know how to work around it and make it work for the people that don’t.
That is exactly what IE9 is, its a broken system for developers & designers however using other methods it kinda work and works just fine for everyone else.
In order to have support for pseudo classes and other CSS3 Greatness in IE9 does the doc type need to be the HTML5 doctype?
No, the doctype has nothing to do with CSS support. You can have any doctype or even no doctype, and you can still use CSS3 as long as the browser supports the features.
It seems that the new preview supports transformation 2D. Good thing. It begins to be good. But with transition, it would be better.
Yep, I saw that. Actually, to quote Microsoft:
So I’m not completely sure this means it will be part of IE9’s full release, but we’ll have to see how it progresses. Good news nonetheless.
As my friends told me..It’s really nice to know that microsoft has developed their IE web browser. But it seems that there’s still bug report on this….
anyway thanks for sharing this post..
Feel depressed!! Why they won’t support the damn text-shadow?
nice list and thanks for compiling it.
not that it’d matter, but for correctness:
overflow-x/yhas been available as of MSIE 4.0 (!!), although only for some elements The bulk support came in MSIE 5.0, so you might want to update your list.
I just checked an old “Platform SDK” from 2000 ;-)
I remember using it a lot a decade ago <sigh> and wished the “other browsers” had support as well.
but who cares *now*? B-)
Actually, it was only proprietary support in the previous versions, so technically support only began with IE7. I guess it could go either way, though.
Thank you Louis for this detailed report.I download IE9 now.
overflow-x/y and overflow result in Data being hidden from view in IE9
Why Microsoft is saying that IE 9 Support CSS3. Actually IE9 not supporting css3.
That is true . IE9 may aim to support CSS3 but does not yet suceed in doing so.
I am using box-shadow and box-radius in a pull down menu, and E9 adds the shadow size to the overall size of the container and in the case of this menu it causes the container to become too large and so you get a float drop on page entry and the menu will stay visible, and doesn’t go away.
My solutions? Compromise my design (take shadows away), or write some kind of conditional statement….
My client uses IE9, and I look bad.
Does IE9 support overflow on tbody? IE 8 did. It’s a key usability issue (for long data tables).
My test tables have failed in ie9.
Otherwise it’s back to IE6/7 hacks for IE 9.
Internet explorer continues to be the worst browser of all!
… even with version 9!
On the good side is that it’s market share continues to drop steadily and in the future will just be another browser like opera and safari while Firefox and Chrome will be the top browsers.
IE3 one of the first to support the basics of CSS…
Some proprietary CSS from Microsoft made it into the spec. (NOT just Netscape/Mozilla/Firefox; Opera;Chrome;Safari;etc.)
WebTV/msnTV was one of the first browsers to support text-shadow (albeit in limited form)
Fanboys of browsers other than IE who deem it okay to slate IE filters and other proprietary CSS from IE usually quite happily use proprietary CSS from other browsers – go figure!
Please consider that the W3C module “CSS Backgrounds and Borders Module Level 3” is “W3C Candidate Recommendation” since 2011/02/15. This module is ready for implementation.
That affects the using of the css-prefixes in IE9. IE9 does no support the prefix “-ms-” for members of this css-module (e.g. “border-radius” and “box-shadow”). But for members of the css3-modules that are still working drafts, IE 9 needs the “-ms-” prefix, like “-ms-transform”.
This is quite confusing, but definitely correct.
I have read every comment on this page and I believe a matter of perspective is seriously called for.
Correct or not. The simple fact remains. On Chrome, Safari, Firefox and even Opera, I can do a rounded corner with drop shadows( including an ‘inset’) and all with an alpha gradient.
/* Drop Shadow */
box-shadow: 0 2px 15px #000, 0 0 1px #000, 0 0 1px #000;
-moz-box-shadow: 0 2px 15px #000, 0 0 1px #000, 0 0 1px #000;
-webkit-box-shadow: 0 2px 15px #000, 0 0 1px #000, 0 0 1px #000;
-o-box-shadow: 0 2px 15px #000, 0 0 1px #000, 0 0 1px #000;
/* Gradient */
-moz-radial-gradient(right top, #daecfc, #a1bde5);
-webkit-gradient(radial, right top, 0, right top, 141, from(#daecfc), to(#a1bde5));
/* Rounded Corner */
/* Transparency */
Seriously, Microsoft can’t even give us this? Whatever the reason, who cares? With such a high percentage of internet users out there using or expected to use ie9 this really serves as a limitation on the internet as a whole.
My challenge: create an .htc file that will solve this problem. Pie is a great start (regarding the above) and does everything I need in this instance except alpha opacity.
Currently doing some gradients on a footer, Lovely in Chrome, Firefox, Opera and Safari – crap in IE 9
My footer has a curved border and a gradient, in IE, as far as I can tell you have to use this damn filter thing to get it to work, all fine but it doesn’t work with the border-radius. Presumably there’s a hack but I’m fed up wasting time trying to accommodate IE when building a site. It’s the same old story.
I dont know why microsoft not providing various special properties which are supporting in Opera or chrome in Internet Explorer.Are microsoft people dont know todays users requirements?
Hello, thank you a lot for making this public. Yahoo has your site at number 1 and I must admit I’m extremely impressed with your webpage.
thanks ie 9 , thanks impressivewebs !
Its really good that IE is supporting CSS3 in IE9. Great table of information, I think IE has added variety of new features than its previous versions.
I think IE9 is further behind than we realize. Simple combinations foul up css3 selectors/properties. I would give their border-radius a conditional check instead of green based on this:
If you’re referring to a bug, that has nothing to do with this list, which is just saying whether or not the features are supported.
Also, it would help if you could describe the bug, or else create a JS Bin or something, so we know what you’re talking about.
Here, I did it for you:
I don’t currently have IE9 installed (I have native IE8 and IE10PP), but maybe someone else can confirm if there’s a problem there, because IE10 looks fine to me.
No rounded corners in IE v 9.0.8112.16421
Yeah it does support them, but if you attempt to use it when using border-radius the gradient ignores the border and shows outside the rounded edges..
Great post! Brief but with most key factors on it!
Hay que comenzar de una vez por todas una campaña en contra de IE hasta que no mejore sus compatibilidad total con css3; resaltando las ventajas de usar Chrome y Firefox; concientizando a nivel mundial lo mejor para las personas y para el diseño!
Me veran luego por acá con las imágenes.
There are two things I dislike about IE. The fact that it is way behind on what it supports and the fact that the majority of the public uses it. IE is annoying.
As a web artist IE is a major pain. The more we as designers, developers & digital artist preach how much better a Firefox, Chrome, Opera or Safari experience is, the more people will switch.
It is 2011, why is this still an issue? How about the W3C sets a browser standard requirement, and after each browser meets those standards they can add whatever features they want. That way all browsers are the same, yet all browsers are different.
Microsoft is boring.
The bottom line is that everytime I design something, I have to go load it in ie to see if it works like every other browser. In fact, I found this blog after looking for some answers to the weird things happening on a site I’m designing for a client. I hate it when clients don’t want wordpress. :(
It feels like you have to dumb it down for people using ie as their browser.
Why IE still exist?
Why it never comes to standards?
Since you guys everytime support crypto-pseudo-codes specialy for IE,4,5,6,7,8 end even version 9, they bind your mind to this old technology or slow support from microsoft. You can’t look forward, because you have to look backward in your genious workarounds. Which means, They hold the market because you let them!
Its made by YOU who every time try to workaround errors and non standards in IE who makes it possible to stay at this market for microsoft. Just dont support it anymore in your codes.. it will be away in just 4months!
I get detailed knowledge about IE browser.Thanks for posting the stuff.
IE9 just like its predecessors is another lazy piece of cr*p browser built by sloppy developers, reluctant on conforming to the latest standards.
The day IE will be finished is the day everyone stops using it in the offices – due to it being shipped with every MS operating system unfortunately it becomes the lazy choice for many ‘average joe’ end users who don’t know of the better alternatives out there, or can’t be bothered to download, or are restricted from downloading anything altogether. The EU and other major bureaucrats need to step in and FORCE MICROSOFT to ship the other major browsers on its operating systems or not have any at all including IE. It’s a monopoly they have had for a long time and everyone can see how MS are stifling progress buy not heeding to their lazy ways. I’m not happy at all with Microsoft like many others.
I get really fed up of everyone bashing Internet Explorer and lauding all the other browsers.
Guess what? the other browsers are just as buggy, don’t support all sorts of CSS3 options properly, have browser specific options, and are just as bad at rendering.
The reason IE is used by a lot of businesses is because the support is there, as opposed to other browsers who generally require you to get the latest every time. It’s not feasible for a business to use other browsers when they need to test that their internal systems work with the new release – the time involved only lends itself to a version update every couple of years.
Oh my god! It doesn’t implement text-shadow! Well I don’t use text-shadow as it looks, well, amateurish.
There’s no substitute for good development – and handling all the different quirks of the different browsers is part of that. I never seem to have any problems, in fact the few problems I do have are with other browsers not implementing the standards properly. You need to write for your audience.
Although IE has improved, other browsers are still way better. There is a reason why so many people use Chrome and Firefox, not IE.