Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

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.

Leave your comment

Nick Sergeant

June 24 2010 @ 10:46pm #

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

Charles Roper

June 24 2010 @ 10:47pm #

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.

John Griffiths

June 24 2010 @ 11:08pm #

nicely done as always ;-)

Sam Hardacre

June 24 2010 @ 11:19pm #

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

Laurent Leborgne

June 24 2010 @ 11:20pm #

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!

Alexis Fellenius

June 24 2010 @ 11:20pm #

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.

Dave Smith

June 24 2010 @ 11:20pm #

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.

Terry

June 24 2010 @ 11:41pm #

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

Sebastian

June 25 2010 @ 12:40am #

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?

Nicolas

June 25 2010 @ 03:12am #

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

Zoe Gillenwater

June 25 2010 @ 04:22am #

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.

Gaurav Mishra

June 25 2010 @ 05:33pm #

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

Paul Irish

June 29 2010 @ 04:23am #

Zoe, yes IE9 supports HSLA. :)

0halan

June 29 2010 @ 08:29am #

thanks man good job

Mark Kawakami

June 29 2010 @ 10:04am #

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.

Unes

June 29 2010 @ 10:31am #

Thanks for the article, IE9 really looks fine!

Chris McKee

June 29 2010 @ 06:50pm #

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

Theo

June 30 2010 @ 06:04am #

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

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.