JavaScript archives
Compatibility
CSS coaching
Thidrekssaga
QuirksBlog
Donations
Politics
Mobile
About
COH
In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.
Besides, CSS3 selectors are now fully supported by all browsers but one. And that one browser is not IE. It’s, curiously, Opera.
Microsoft has finally taken the big leap forward we’ve been waiting for ever since they announced their decision to restart IE development back in 2005.
IE9 promises to be an excellent browser. Its CSS support is now at par with that of the other browsers — although each browser still has its specific areas where it performs less. But we cannot in good faith say that IE is behind the others any more.
There are only a very few declarations in my test that IE9 does not support. CSS columns, gradients, text-shadow, resize, and text-stroke are the only ones, and the latter two are WebKit-only.
Even better news: Microsoft’s filters seem to have just disappeared from IE9. It supports normal opacity; no more filters required. Also, the gradient filter is gone, leaving IE (temporarily?) not supporting it.
Another golden oldie that got dropped is cursor: hand, the MS proprietary alternative to cursor: pointer. That’s not really important in practice (IE6 already supported both syntaxes), but it’s a powerful symbol of the changes that the IE team has wrought.
With so much excellence around I was almost glad when I found one single bug: IE9 doesn’t handle white-space: pre-line right. This bug will be fixed, though. It’s typically a minor point that crops up in a beta and is removed from the final product.
Kangax studied the JavaScript and DOM changes and finds significant improvements. He also lists quite a few things that still have to be addressed, but those items strike me as fairly minor points, most of which are probably honest oversights.
By the way, if you want IE9 to be an excellent browser, do what Kangax and I did and test it. Then write up the results, and point out bugs or possible improvements. The IE team needs this feedback, and I know from experience that they do read this kind of posts and try to improve their product.
If you know of another series of tests that somebody has put IE9 through, pleae leave a comment.
CSS3 selectors are now fully supported by all browsers but Opera. Not that Opera’s sins are manifold: there are two bugs the Opera team will have to solve in order to join the fully-compliant browsers:
Both are relatively minor issues, although both have been plaguing Opera for ages now. All other browsers have had similar nth-child problems, but they have been solved fully.
I already talked about the support for the background module. There’s no question here: IE9 has the best support; Firefox the worst.
I added :nth-last-child() and :nth-last-of-type() and :first-of-type, :last-of-type, and :only-of-type tests, this being the only CSS3 selectors I did not test yet. All browsers support them fine.
We can also welcome a whole new slew of values for list-style-type. Binary, lower- and upper-hexadecimal, lower- and upper-norwegian, and octal are now supported by Safari 5 and Chrome 5. I’m not sure if these values are terribly important, but binary lists will look cool on any nerd-type of site.
I also added test pages for border-radius, box-shadow, gradient, text-shadow, and text-stroke. These properties are more of a mixed bag; the first two are universally supported; the last three are not supported by IE9, while Firefox lacks text-stroke.
All in all this was time well spent. CSS3 is really coming on strong, and there’s no more excuse not to try your hand at it.
This is the blog of Peter-Paul Koch, web developer, consultant, and trainer.
You can also follow
him on Twitter or Mastodon.
Atom
RSS
If you like this blog, why not donate a little bit of money to help me pay my bills?
Categories:
Comments are closed.
1 Posted by Martijn van der Ven on 28 June 2010 | Permalink
Nice sum up as always!
I think you were rolling out those new tests a little to quick.
On http://www.quirksmode.org/css/boxshadow.html
“box-shadow allows you to create rounded corners in CSS.”
2 Posted by Mathias Bynens on 28 June 2010 | Permalink
Quote from http://www.quirksmode.org/css/gradient.html (and some other pages, which mistakenly include that text. I guess you copy pasted a bit too much?):
“I haven’t found a way to make the gradient go from left to right. Also, make sure you use six hex figures, not three, or IE may get confused.”
It’s possible to specify the so-called ‘GradientType’. Set it to 0 if you want a horizontal gradient.
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#000000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#000000)";
3 Posted by Aaron Gustafson on 28 June 2010 | Permalink
How are you finding :nth-* support when spaces are present inside the parentheses? For example, the spec seems to imply that tr:nth-child( 2n + 2 ) should be valid, but my tests of that failed in Safari 4. It's possible I'm misunderstanding the tokenization, but it does use "S*" in several places where I've included spaces in my example.
4 Posted by ppk on 28 June 2010 | Permalink
@Martijn: corrected.
@Mathias: Since IE9 doesn't support the MS gradients any more I doubt whether I'll do any more research.
@Aaron: no, I didn't test that.
5 Posted by Mathias Bynens on 28 June 2010 | Permalink
@ppk: Fair enough, but I just did the ‘research’ for you :)
6 Posted by Brian LePore on 28 June 2010 | Permalink
Just to be pedant and add to Mathias' point, the MS filter can actually take 8 characters for RGBA support.
CSS gradients are the only issue I would not be surprised if IE does not solve (maybe CSS columns too, but I am inclined to believe they will have it). The syntax differs far too much between Gecko and Webkit. I hope I'm wrong though.
7 Posted by Paul Irish on 28 June 2010 | Permalink
Here's what Modernizr looks like in IE9pp3:
http://paulirish.com/i/d870.png
(and it fails all of html5 forms)
Test page is here: http://modernizr.github.com/Modernizr/output.html
Like you, I found that IE9pp3 supports box-shadow despite them not announcing it. Sylvain indicated they're working out the definition of 'blur' before they announce their support.
8 Posted by Abdullah Arif on 28 June 2010 | Permalink
If the body's CSS direction is set to right-to-left (rtl), IE9's border-radius uses logical dimensions instead of physical, as opposed to the way all other browsers do it.
Example: border-top-right-radius: 6px;
You'd expect this to apply to the top-right corner as you perceive it in your screen. In IE9, it takes the page's RTL direction into mind and instead applies the radius to the top-left corner!
This isn't the way Firefox, Chrome, and Opera do border-radius.
Anyone from the IE9 dev team care to escalate this report or at least guide me to the bugs report page. I would truly appreciate it.
9 Posted by Paul Irish on 28 June 2010 | Permalink
@Abdullah, the IE team would love to hear about this, I'm sure.
You can write up the behavior on their bug reporting site here: https://connect.microsoft.com/IE/Feedback
10 Posted by Adardesign on 28 June 2010 | Permalink
Lets not forget, IE has a tradition of shipping each new version with 20+ ugly bugs, so lets not get excited yet
We cant know if for some reason IE will decide that if a video element is floating:left it will stop playing after 13.4 seconds.
You cant predict what stupid bugs these people will ship IE9 with (even if almost everything looks good now)
Also why cant IE enable version updates that in case there is bugs it will prompt the users to update to a new version, just as any modern browser does.
11 Posted by akita16384 on 28 June 2010 | Permalink
Which version of Opera did you test with?
I tested with Opera 10.60.6383 Beta build in Ubuntu (Lucid) and it pass all those tests you mentioned.
The latest 10.60 RC1 is out for all platforms.
http://my.opera.com/desktopteam/blog/2010/06/28/opera-10-60-rc1
12 Posted by Tempur Mattresses on 29 June 2010 | Permalink
You can share just about anything on the web and I would like to share my good experience. I just found the nicest thing I just purchased recently. It is my new Tempur Mattresses. Try to check it out.
13 Posted by Matthew James Taylor on 29 June 2010 | Permalink
That's super awesome! Who would have thought that Opera would be last?
14 Posted by Tom Carver on 29 June 2010 | Permalink
Sorry to be a pedant, but IE 9 is a long way from being released, so I'm not sure it's fair to Opera to claim it's "last" to the party just yet.
15 Posted by Evan Mullins on 29 June 2010 | Permalink
IE9 sounds promising, they have a lot to make up for after being the bain of every web designer/developers existence. I remain a bit skeptical though, I will give them the benefit of the doubt thoguh and wait til it's out and I can try it before I go bashing ie9. Til then there's plenty of ie6 ie7 & ie8 to bash...
16 Posted by Womi on 29 June 2010 | Permalink
Thank you for this great Information!
Gruß Womi
17 Posted by Alex Boyce on 29 June 2010 | Permalink
In your gradient test, you said that you did not know how to make IE's gradient filter go left to right. The filter has a property called GradientType. 1 means left to right, 0 means top to bottom. Change line 35 in your test to this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType='1');
18 Posted by Nicolas Chevallier on 3 July 2010 | Permalink
We can see a radical change in mentality regarding the adoption of standards. As what the competition was good!
19 Posted by Dennis on 5 July 2010 | Permalink
Finally yay!
20 Posted by mikey on 6 July 2010 | Permalink
Microsoft making a functional standards-compliant browser? Did I step into a parallel universe?
21 Posted by giano on 6 July 2010 | Permalink
Don't worry, Mikey. You are in the regular universe. It will simply be incompatible in brand new, exciting ways...