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.

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.

Andy Clarke 24/06/10 | Tweet this | Short URL: http://stuffandnonsense.co.uk/s/1328

There have been 18 replies

  1. 1

    Nick Sergeant

    Loving every word of this blog post. Thanks for your diligence in testing :)

    24th Jun 2010
  2. 2

    Charles Roper

    You alluded to it, but didn’t explicitly mention that the new DirectWrite text rendering in IE9 offers much better anti-aliasing than previous versions, which will make for much more pleasant @font-face driven typography. At body text sizes, the typeface really needs to have been designed with ClearType in mind; that is, it needs to be well hinted. But at headline sizes, rendering is noticeably improved and fixes the problem Jon Tan described back in 2007.

    24th Jun 2010
  3. 3

    John Griffiths

    nicely done as always ;-)

    24th Jun 2010
  4. 4

    Sam Hardacre

    A giant leap forward for IE team. Hats off to them

    24th Jun 2010
  5. 5

    Laurent Leborgne

    It’s really good news to see Microsoft doing such a work in the good direction!
    CSS3 support is such better in that release, and canvas support is there too; as an example to these steps forward, chromeexperiments as well as Mr Doobs threeJS demos run very well.

    Go Microsoft, more efforts on CSS3 (transform in pp4?), then add support for new forms types, webGL and missing HTML5 APIs!

    24th Jun 2010
  6. 6

    Alexis Fellenius

    It just hit me that we’re seing the light at the end of the tunnel, when all major browsers have support for most of the latest standards. Who thought that would happen back in the day. The progress on the web hasn’t been this much fun since 2002.

    24th Jun 2010
  7. 7

    Dave Smith

    Thanks for using FindMeByIP Andy. Glad you’ve found it useful.

    The tests are still running Modernizr 1.1 but we’re intending to upgrade to the latest version asap. When that’s done we might find that IE9 looks even better as I understand that Modernizr team have fixed a few tests to improve accuracy.

    Anyway, IE9 is looking really good and using FindMeByIP to compare with other browsers really highlights how far it’s come.

    24th Jun 2010
  8. 8

    Terry

    Appreciate you taking the time to test and share your findings.

    24th Jun 2010
  9. 9

    Sebastian

    Great overview. Just one question: Does IE9 support CSS transforms? You have shown the jagged edges in Chrome, but is it at least supported in IE?

    24th Jun 2010
  10. 10

    Nicolas

    Thanks for this review.
    I didn’t know findmebyip and it’s a handful tool !

    24th Jun 2010
  11. 11

    Zoe Gillenwater

    Thanks for the overview, Andy. I haven’t had time to play with it yet—does it support HSLA? HSLA is so much more intuitive to use than RGBA. It would be a shame if they added support for RGBA and left HSLA out of the party.

    (This comment was left on For A Beautiful Web)

    24th Jun 2010
  12. 12

    Gaurav Mishra

    I got my ‘border-radius’
    that’s why i was waiting for IE9

    (This comment was left on For A Beautiful Web)

    25th Jun 2010
  13. 13

    Paul Irish

    Zoe, yes IE9 supports HSLA. :)

    (This comment was left on For A Beautiful Web)

    28th Jun 2010
  14. 14

    0halan

    thanks man good job

    (This comment was left on For A Beautiful Web)

    28th Jun 2010
  15. 15

    Mark Kawakami

    Thanks to box-shadow, border-radius, rgba, multiple backgrounds and gradients, I am finding the need for border-image to be almost none. I haven’t once found myself in a real-world situation where border-image would seem to be the best solution. It would be nice if IE9 had it, but with everything else we’re getting, I’m definitely not complaining.

    29th Jun 2010
  16. 16

    Unes

    Thanks for the article, IE9 really looks fine!

    29th Jun 2010
  17. 17

    Chris McKee

    IE9 is looking pretty fantastic; if only it worked on XP for the millions that won’t upgrade

    29th Jun 2010
  18. 18

    Theo

    Thank you for this really impressive resume for IE 9. It`s hard to believe that IE will be a modern browser.

    29th Jun 2010
Commenting is not available in this weblog entry.

From the archives

An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.