Internet Explorer 9 is on the boil
Yesterday Microsoft announced the third Platform Preview of Internet Explorer 9. I’ve been using this preview for a while, testing how their newest browser stands up to the examples I’ve designed for Hardboiled Web Design.
By any measure, the progress that the IE team have made with Internet Explorer 9 is impressive. Hardware accelerated graphics, upgraded support for CSS3 selectors and properties, Web Fonts and HTML5.
Running Internet Explorer 9 through FindmebyIP
Run Internet Explorer 9 through FindmebyIP's testing tools and it performs well, really well, compared to IE8.
FindmebyIP HTML5 test results
Hardware accelerated Canvas and Canvas Text support are only the start (Run the Fish Tank Canvas demonstration in IE9 and the frame rates are staggering, even compared to Safari 5 on my iMac.)
The big news of course is Microsoft’s support for native HTML5 video (using the H.264 codec) and audio. Surely now the writing is on the wall for Flash as a video delivery format. I think that Microsoft’s decision to support HTML5 video is a far bigger deal than Apple's position on Flash.
Internet Explorer 9’s CSS3 support is none to shabby either. RGBa and opacity are there, as supposedly is box-shadow (although that isn’t working in any of my tests.)
FindmebyIP HTML5 test results
border-radius was an obvious, but welcome addition. Now we can finally put away those image and JavaScript hacks. Currently it gets applied only to display:block or display:inline-block elements (not inline) and I’ve submitted a bug report. I’m sure this will be fixed in time for the next release.
Every site needs rounded corners. Don’t they?
@font-face is given a huge boost with the addition of WOFF (Web Open Font Format) in Internet Explorer 9 in addition to the traditional EOT. This will be great news to anyone who has had trouble with creating EOT files.
“It’s Hardboiled” 404 page using WOFF in Internet Explorer 9
Most pleasing to me is Microsoft's decision to support all CSS3 box-sizing properties in Internet Explorer 9. content-box, padding-box and border-box all work splendidly.
Internet Explorer 9 has (almost) full CSS3 selector support as well as box-sizing
Add CSS3 background properties, multiple background images, background-sizing and background-clipping and I am very happy indeed.
Multiple background images (finally) in Internet Explorer
Not content with a partial implementation, Internet Explorer 9 supports two amazingly useful CSS3 background properties for liquid, flexible designs. They are contain and cover and I make heavy use of them in “It’s Hardboiled”.
Scaling background images with contain (top) and cover (bottom)
While we’re on the subject of graphics, Internet Explorer 9 has superb rendering of both type and images, even those that have been rotated and scaled using JavaScript.
CSS3 transform (rotated) elements in Google Chrome (Windows 7). Jagged edges
CSS3 transform (rotated) elements in Firefox 3.6 (Windows 7). No jagged edges
Compared to Google Chrome’s handling of some CSS3 properties, Internet Explorer 9 is impressive. Of course there are HTML5 elements and CSS3 properties that I wish were included.
text-shadowis missing but I can live with that.border-imagewould have been nice.- CSS3 columns are missing too and I find it harder to live with that.
Although Internet Explorer 9 hasn’t support for these or CSS3 transforms or transitions, personally I’ m glad they have made what they have implemented very solid.
Overall Internet Explorer 9 handles my Hardboiled Web Design example files very well indeed. Colour me impressed. You should be too.