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.

The Windows 8 Web Platform

Before we go into the details of HTML5 support in Win8/IE10, it’s probably worth stepping back and covering some essentials of Windows 8. Windows 8 represents a big shift in Microsoft strategy because it makes web technologies a Tier 1 development option for native Windows apps.

The core Windows services for graphics, i/o, device access etc. all have JavaScript bindings equally as rich as the bindings for developers working in .NET or C++. The Microsoft message is that you can now build any native Windows app using web technologies.

So… what will be the differences between simply developing a web-based app for use by IE10 and developing a web app that gets delivered as a Win8 native app? The first difference is the resources that you’re allowed to access and how you’re allowed to access them. As a web-based app, you don’t get access to protected system resources such as camera, printers etc. To package your web app as a native app, you must create a permissions manifest file describing the protected resources that your app wants to access, and then submit your app to the (forthcoming) Windows app store. On submission, it will be checked for compliance with a battery of technical and policy tests.

Although it wasn’t altogether clear from Build, our guess is that app store compliance testing will be Microsoft’s mechanism for controlling web technology evolution on the Windows platform.

HTML5 Support

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, SVGfilters, 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.

Microsoft Gets Some Firsts

In addition to substantial catchup on UI-related features, IE10 also pioneers some new technologies that haven’t made it into other browsers yet such as CSS Regions and positioned floats. CSSRegions is a working draft authored by Adobe that enables newspaper style layouts with features like irregular inserts that span multiple columns, as well as configurable text flow around floating elements. These are very useful for publications that want to duplicate print-style layouts on the web. (Finally, Microsoft is still pushing grid layout, although it continues to be the sole browser that implements it, and predecessor specs have languished in the CSS working group for years.)

IE10 also has some nice extensions for touch interfaces that control scrolling and pan/zoom on elements. For example, the new -ms-content-zooming CSS property controls zoomability and the -ms-scroll CSS properties control scrolling behavior. These do not seem to be standards track yet, so it would be good to see some working drafts from Microsoft covering these new properties.

What’s Missing From IE10?

With all the substantial catchup, there are a number of notable HTML5 technologies that haven’t appeared in IE10, and given Microsoft’s platform strategy, seem unlikely to ever show up there. First, WebGL is explicitly off the menu. To work with 3D graphics, it seems that web developers will have to use the JavaScript bindings to Windows Direct graphics APIs and distribute their apps only as Windows apps. Similarly, media capture and Device APIs are missing and given the thrust of the strategy, seem unlikely to show up anytime soon. These are the types of API’s that Microsoft wants you to consume via native bindings.

And What Will Ship?

If you couldn’t tell already (!) we’re very excited by Windows 8 and IE10. We think it cements HTML5 as the standard cross-platform app development tech. We wish we didn’t have to use native packaging to get access to interesting device API’s, but Microsoft is unlikely to implement these without a competitive spur. The final, but major, caveat is whether all these technologies will retain their speed and performance when Windows 8 is squeezed onto next year’s $299 tablets which are likely to have a GigaByte of memory and a lower-powered ARM processor.

We certainly hope so.