Internet Explorer 10 brings HTML5 to Windows Phone 8 in a big way

We are excited to bring Internet Explorer 10 to web and app developers as part of Windows Phone 8. I posted earlier about how you can use IE10 on Windows 8 to do early testing of your sites. Now that the SDK is available, it is a great time for you to use the included emulator to test your sites directly on Windows Phone 8. It is also a great for us to start talking about the platform in more detail. To get us started, here is an overview of the huge advancements in HTML5 support that we are bringing with IE10. This blog post was authored by Jorge Peraza, a program manager on the Internet Explorer team in Windows Phone.

-Charles

 


As we celebrate the release of Windows Phone 8 around the globe, we would like to share some of the exciting new features that will make building feature-rich HTML5 sites and applications for Windows Phone 8 easier than ever.

It is important to mention that these features that help give Internet Explorer its fast and fluid performance (including the blazing fast JavaScript engine) work the same way in both Internet Explorer and any application that uses the WebBrowser control.

More beautiful sites

In Internet Explorer 9, we introduced a hardware-accelerated platform and showcased real-world breakthrough performance for canvas, SVG, audio, and video. In Internet Explorer 10, we are expanding CSS3 support to include features that make it even easier to create beautiful experiences:

  • 3D Transforms: Apply interesting 3D effects to any element on the page.
  • Transitions and animations: The hardware-accelerated rendering platform allows transitions and animations to run independently of the main browser thread, giving you unparalleled performance.
  • Shadows for both text and boxes: Adorn your text and containers with drop shadows for a more artistic look.
  • Gradients: For those color changing moments, CSS gradients will be there for you. No more one-pixel wide image backgrounds!
  • Custom fonts: By popular demand we now have full support for Web Open Font Format (WOFF) on Windows Phone. Better yet, our friends from TypeKit, who provide a super popular library to add cool fonts to any website, announced official support for Windows Phone 8!
    •   
TD - Particles TD - Chalkboard TD - Text TD WOFF

Immersive and intuitive layouts

Having a clean, immersive, and intuitive layout is key to attracting and engaging your users, but accomplishing this goal can be difficult without advanced layout and formatting features. The good news is that Internet Explorer 10 has a large number of features specifically designed to provide that clean, fresh look without the need of CSS and HTML ninja skills.

  • Multiple columns: Wouldn’t it be great if the browser could automatically separate a block of text into multiple columns? Well, it is now possible, and it works great!
  • Positioned floats: Every web designer that ever experimented on how to make text flow around an image (think of a magazine) has found that this is not very easy to do with the current box model. To make this easier, Internet Explorer 10 adds support to the emerging wrap–flow style. Creating HTML5 magazines is now like a walk in the park!
  • CSS Regions: This is another feature targeting the creation of magazine-like layouts in HTML. It allows developers to define a series of containers that text from a different source will flow through. You can read more about it in this Ars Technica article!
  • Grid layout: Silverlight-like grid layout is coming to the web! This feature allows great control over how elements are positioned and makes table layouts a thing of the past.
  • Device adaptation: Allows developers total control of the layout viewport. I will write more about this in a future post.
  • Flexible box: This much-requested feature allows you to position their elements so they flow in a given direction as well as expand to use available space.

     

    TD - Home CJ TD - Sanp

    Always ready

    • HTML5 Application Cache: Makes your website files available offline!
    • IndexedDB: Indexed object storage – you can think of this like a ‘turbo-dictionary’ that can be used with AppCache to provide a full offline application experience for your site.

      And more

      • Web workers: Multi-threading for the people!
      • Web sockets: Provides a low-latency communication channel back to the mother ship… I mean host server.
      • Multi-touch and gesture support: Add full support for touch and gestures so they respond to input in an intuitive way.
      • And many more.

        Differences with Windows 8

        There are some minor differences between Internet Explorer 10 for Windows 8 and Internet Explorer 10 for Windows Phone that you need to be aware of. Internet Explorer 10 for Windows Phone does not support the following:    

        • Inline video
        • Some of the new manipulation views APIs  for touch panning and zooming, with the exception of –ms-touch-action
        • Multi-track HTML5 audio (simultaneous)
        • ActiveX and VBScript
        • Drag-and-drop APIs
        • File upload via <input type=”file”> and File access APIs with the
          exception of blobs which
          are supported on Windows Phone 8
        • Cross-tab communication via script (as a result window.open opens the destination URL in the same tab)
        • navigator.msLaunchUri
        • Windows 8 integration features: Link previews, pinned site icons & notifications and support for connecting sites to apps
        • Also in Internet Explorer 10 for Windows Phone, Window.open does not return a valid window object. This is because on the phone each “window” is isolated in its own sandbox.

                     

        Want to know more? 

        Check out the webcast of my recent talk at the  //build/ conference, where I’m joined by my good friend and co-worker Rick Xu to show the world what HTML5 on Windows Phone is all about!

        Wrapping things up, HTML5 is coming to Windows Phone in a BIG way, and we are inviting all web developers to try it out, give us feedback, but above all, build great apps!

        Jorge Peraza
        Program Manager