IE10 Preview: HTML5 First Look
Over the last year we’ve been putting every new major mobile platform through a battery of tests to assess how they stack up as an HTML5 application platform. So far, it’s been thumbs up on Apple, RIM and HP tablets and thumbs down on Android tablets. But we’re still crossing our fingers that the Ice Cream Sandwich release of Android will make the grade.
To date, we haven’t spent time on Windows phones, mostly because the Windows Phone 7 browser was so poor that it wasn’t worth evaluating. However, at the Windows Build conference last week we got our hands on a developer preview tablet running Windows 8 and Internet Explorer 10. We wanted to share our first impression of the HTML5 experience. Simply put, (and with the caveat that we were running on the notably overpowered developer preview hardware) the IE10 HTML5 experience is one of the best we’ve seen on any platform to date. After a decade of web neglect, Microsoft is back with a vengeance.
So, what’s new in IE10? A huge number of new features, particularly in the area of UI elements and effects. The IE10 preview supports almost every visual HTML5 and CSS3 feature that’s been introduced in the last three years and several more besides. IE9 was already a serious step-up for Microsoft with capabilities such as hardware accelerated Canvas, but IE10 introduces much more including:
- CSS Transforms and Transitions: 2D and 3D transforms work smoothly and at high quality. Anti-aliasing and perspective handling for 3D transformed elements is visibly superior to many other browsers. And the smoothness of transforms is impressive which means that they’re probably hardware accelerated.
- CSS Animations: are fully implemented with the syntax pioneered by WebKit. This is very exciting for us because it means that Sencha Animator animations play easily on IE10 with a simple find/replace of –webkit to –ms.
- CSS3 Shadows: both text and box shadows are completely supported (including inset shadows!). Combining shadows with other effects works flawlessly.
- CSS3 Gradients: fully supported with new style webkit/mozilla syntax which allows circular and elliptical radial gradients among all the other options
- And that’s just the start. There are also web workers, web sockets, web fonts, Indexed DB,SVG filters, flexbox layout. Border-image seems to be the only thing not implemented.
Remarkably, particularly for developers trained to look out for Microsoft platform tie-ins, there are none on this list. Microsoft simply implemented the draft standards with no extensions or gotchas.
What’s Missing From IE10?