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

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

  • Comments 24
  • Likes

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

24 Comments
You must be logged in to comment. Sign in or Join Now
  • I have a question about the "input type=file" difference that was mentioned in the list of differences between with Windows 8.

    I have been working on a photo uploader project, and in the Javascript development, I have logic in place to check for File API support, so I know if I can support local file selection. Surprisingly, the code I have in place to check for FIle support is returning a "true" value on Windows Phone 8, despite there not being support for local files as you mentioned. I'm hoping someone could shed some light on how to better check and confirm if local file selection is available on a specific device/browser. One BIG caveat is this: I need the code to be device-agnostic, so I don't want to sniff for a browser user-agent, as this adds an unneeded layer of complexity for ongoing maintenance.

    My JS code to check this support is:

    function checkLocalFileSupport() {

       if (window.File && window.FileReader && window.FileList && window.Blob) {

           return true;

       }

       return false;

    }

    As I said, this function returns "true" on Windows Phone 8. I've been trying a variety of different methods to see if a type=file input is enabled from a variety of supposed solutions found on different forums, but all of the other solutions still return "true" for WP 8.

    Hopefully someone can help shed some light on how to accurately get WP 8 to return a "false" value for local file support. Thanks in advance!

  • First of all, I really like my Nokia Lumia 800 and Windows. This is not to be negative....take it as a hint/pointer/kick in the right direction:

    I really have a problem with IE on WP7 and 8 not supporting video and true html5.

    Being the underdog among the mobile platforms, as regards to number of users, I simply can't understand this thinking.

    In my view you (MS) can not afford the be this much behind the two others.

    Where I come from, Denmark, e.g. the danish NPR-equivalent, dr.dk uses a moblie platform. No WP support - since IE apparantly has a different perception of html5 than the phones 95% of the users have. And dr.dk will not allow apps, mobile platforms are the future (of course they are right).

    Scanning QR-codes for company websites (Coca-Cola e.g.), I guess more than half of them doesn't show on WP. This is Serious! This is a really bad user experience, so no matter how seet the OS is, this is what people use. And will the sweet OS make up for the functionality in daily life not been there...?  Will that make people recommend WP?

    Try going to html5test.com and see how a wp7 ie9 only scores a mere 138 point out of 500. Not to be rude, but guys, there is room for improvement!

    Please, get in the game, do accept that other people than MS have set a standard.

    Let this not be the IE6 scandal over again. There is no need to be arrogant, and believe that "we know true html/html5" when the rest of the world disagrees!

    You have a 3% market share! 3 not 30! You should be ahead of the game, not behind!

    I hope this comment gets to a developer in the IE team!

  • , using your Javascript fallback above I get the value 0.75. Specifically, the screen.availWidth is 768 (the actual pixel width of the screen) and the documentElement.clientWidth is 1024 – as our site is responsive I'm not sure where this is coming from.

    Would a better property to divide by be window.innerWidth? Cursory testing of this reveals 480, which aligns with the width of WVGA screens.

    This would give the following results:

    720p: 720 / 480 = 1.5

    WXGA: 768 / 480 = 1.6

    WVGA: 480 / 480 = 1

    Which align perfectly with this page: msdn.microsoft.com/.../jj206974(v=vs.105).aspx

  • Bardeh
    0 Posts

    I really need the file API to work on WP, is this left out for good or is there a chance it may be added? iOS implemented it in version 5, and Android has it... Fingers crossed.

  • There are two way to use high dpi assets on Windows Phone

    The first one uses media queries, note that this requires the use of a specific pixel count for the viewport size so it may not be the ideal solution for you.

    @media screen and (min-width:720px) {

               @-ms-viewport {

                   width: 320px;

               }

              // High res assets here

           }

           @media screen and (min-height:720px) and (orientation: landscape) {

               @-ms-viewport {

                   width: 320px;

               }

           // High res assets here

           }

    The second one uses javascript and does not requires any hardcoding

               // If you really need the equivalent to device pixel ratio use this

               var devicePixelRatio = window.screen.availWidth / document.documentElement.clientWidth;

  • I am confused. How are we supposed to use retina images for IE10 on WP8? We have to use media queries (I will not use the server for something that should be done in the browser). If IE10 doesn't support device-pixel-ratio, and min-resolution is always 96dpi, I can't serve IE10 on WP8 retina images.

    This sucks.

    Is there any way to serve retina images to WP8?

  • This just leaves me confused on what the best path to take is for application development - I have no experience with developing mobile apps but have recently installed the win phone 8 sdk etc.and it seems most of the text (written pre-win phone 8 use xaml) I do have significant experience in both silverlight and html5/js - all of the ms signals seem to be that silverlight is on its way out the door but all/most popular texts for win phone dev are written for silverlight - did ms just make all of these books published in the past year or so obsolete?

    It's near impossible to jump on a bandwagon when you don't know where it's going - by my understanding apps for win phone can be now written in 3 different ways silverlight/html5/xna - that's not really reassuring knowing if you pick the wrong path ms at a whim can pull the rug out from under you by saying silverlight or xna or html5 are no longer supported - I think I'll just suck it up and learn iOS at least it's consistent.

    PS if my rambling makes no sense you can thank the MS marketing dept because my thought streams are just about as clear as their signals and are the accumulation of reading ms materials - love the win phone interface which is why I thought it would be fun to take a crack at making an app - same old Microsoft running around like a chicken with a detached brain.

  • Your observations are correct.  IE 1 0 on the phone is currently locked down to 96dpi so device-width/height on @viewport will return real pixel values. We believe that having the device-with and device-height values match the DPI being used to layout the page is the correct behavior so it did not make sense for us to keep the 320px value moving forward. We hear your feedback so this is something we will be looking at.

    In the meantime you can use device detection and @viewport set to 320px or just use the old META tag as we preserved all its quirks for compatibility.

  • Malmer
    0 Posts

    Edit: On WVGA it actually also gives actual pixels. So in this case @-ms-viewport with device-width gives 480. Considering the screen sizes are quite similiar on the devices, and only the ppi is different, the whole thing is quite hard to manage as a developer. Unless on just skips the @-ms-viewport rule. But then we leave out Windows 8, so that doesn't help.

  • Malmer
    0 Posts

    I have been playing around with the WP8 emulator and -ms-viewport and found some strange behavior. When using the meta viewport-tag with width=device-width I get a viewport that is scaled to 320px in width. So it looks like most mobile websites. No big change there.

    However, when I put in a @-ms-viewport { width: device-width; } I get actual pixels, so with width of the page is instead 768px. Which in turn makes everything quite small for a mobile device. And there is no way to detect this mode as different. Dpi is still 96 and min-device-pixel-ratio is not supported.

    If I put in media queries to set a viewport specifically, for instance 320px for everything below max-width: 400px, it will grab on to the media query that matches max-width: 768px, since that is what the specification calls "initial with".

    Now this is when running the emulator in WXGA (768x1280) mode. When starting the emulator in WVGA (480x800) it will always be 320 and behave as predicted.

    Why didn't you make it consistent? Where device-width was always 320px? Or add some other method of detection? Now if the @viewport rule is the future and viewport is apple's propietary solution, shouldn't it in some way reflect the actual physical size of the screen? If the other manufacturers embrace this I bet they will start with an initial width of 320px and also have their min-device-pixel-ratio to differentiate. No such thing on WP8 :(

  • I'm with Stilgar: every release of IE on Windows Phone I expect to have these fixed, and they aren't. Jorge, do you have any explanation for why this hasn't been implemented? Surely there isn't a programming issue, this would be so easy. Are there patent limitations? Political restrictions? Form field-awareness has been around in one form or another since Blackberry 5 (I think, it was years ago), and early-generation versions of iOS, if not from the very beginning. It is SO much easier to have the onscreen keyboard change to reflect the form field type that I am completely confounded why this hasn't yet been implemented.

  • On Windows Phone 8 we suspend all script execution when the application goes to the background so there is no way to support the scenario you describe as an app... A website however can do this using the HTML5 audio APIs as the browser does allow this.

  • Hi there! I just finished watching your //build/ talk - excellent content! I've been a web developer for years and I am excited that I can use my existing skill set to build phone apps.

    Can html 5 apps run in the background and can I stream audio using html 5 and JavaScript? Implementing this in Windows store apps looks trivial and there are a few examples out there, but I haven't been able to find an html 5 / JavaScript example for Windows Phone 8.

  • We hear you. Thanks for your feedback!

  • Stilgar
    10 Posts

    @Jorge Peraza this is sad. As an end user I feel date and time are one of the most important types for mobile phones as inputing them via the on-screen keyboard is so hard and the JavaScript calendars are not optimized for mobile.

  • Nathan
    63 Posts

    @Brandon LeBlanc, thanks for your reply. I can ensure you my comment was eaten yesterday by this website on the same post by Windows Live. I am sure there wasn't any offensive word in the text!

    Secondly, because Telligent is third-party and office blogs also uses Telligent system, it is treated as third-party for Windows Live. If you try to sign-in with Windows Live for the first time, it takes you to the manage page where all the "third party" applications associated with Live appear. Its must be treated as native.

    Also, it doesn't load the Live profile nickname, it fetches the full name of the person. Like MSDN social forums, Microsoft Connect, WindowsPhone.com, Outlook.com, Windows.com, Microsoft.com, Office.com etc. does.

    While you are at it, please consider the following:

    - Ability to edit and delete comments in addition to threaded messages.

    - Comment flaging.

    - Comment voting.

    - Private converations page exists (blogs.windows.com/.../conversations) but the link is gone. please bring it back.

    - When someone invites us we recieve an email notification but there is no notification on the website itself.

    - The notification email template requires some branding. Its looks experimental.

    Finally, Please make a universal "rich", "ajax-driven", "next-gen" "HTML5 based" blog system and implement it everywhere; MSDN, Windows, Office, Xbox etc..

  • @Nathan - thank you for your feedback about comments here on blogs.windows.com. I can assure you that our platform isn't "eating" comments. The issue you are seeing where the number of comments the post says there are is not the number of *actual* comments posted on the blog post is a bug we are currently in the process of fixing. The issue is that trackbacks are being counted as comments but we do not display trackbacks. In fixing this bug, trackbacks won't be counted as comments and the number of comments shown on a blog post with be the same as what is actually posted.

    Also: blogs.office.com uses the same platform as us so it is not a totally different system.

    I am glad you noticed the new branding here for blogs.windows.com. We're not finished yet. We are still making some tweaks and we have further improvements to make with regards to comments specifically. For example we're adding Microsoft account sign-in to the site. And we're also going to be adding threaded comments.

  • Nathan
    63 Posts

    You guys know lot about HTML5. How about you take a shot at improving blogs.windows.com and blogs.msdn.com (blog suite by notorious Telligent). The comments system of these blogs are known for "eating" user comments. With new branding of blogs.windows.com, all comments are not displayed!

    For example, this post by Windows Live team blogs.windows.com/.../the-next-chapter-for-the-windows-live-messenger-network.aspx suggests that it has 21 comments. If you click on 21, it will navigate to internal # link and deep down, its written 10 comments before the textarea! If you count the comments its around 15 comments.. This is a funny story and there are 100's of such stories about Telligent blog system on MSDN blogs for years now! I wonder how much time would it take for an MVC developer at Microsoft to build a blog application (given there are number of blog-system example on ASP-MVC at official asp tutorial website).

    Its merely pain for the visitors. People write comment and when they post submit, the blog-system eats comment in number of scenarios. Like for guest user on (1000 years old looking) MSDN blogs, they have 10-15 minutes before the session-time out. If someone type a long comment and press post and the session was time out. The page will refresh without any notification and the comment is lost! It shouldn't perform the submit action in first place if the validation is not passed.. Or there shouldn't be a session timeout.. Or at least it should retain the  text in text area if the post was not successful with a notification message..

    Office blogs (blogs.office.com) is using a totallydifferent system. I wonder, why can't we use single live id to sign in to all Microsoft blogs!! Do you see a problem here?

    Please don't get me wrong, this is a constructive criticism and these issues are there for ages now. The guy Ted Johnson of MSDN IE blog is well aware of this issue as it has been reported to him (as well as Telligent support) over and over so many times. Can you guys at Microsoft take initiative for a voluntarily work and gift your company a next-generation state-of-the-art working blogging system? A real rich-internet-application with interactive comments (a weekend gig for a nerdy devs such as yourselves) 8-)

  • abm
    268 Posts

    At 47:50, he said "You will have Internet Explorer 9 which is also capable".

    So IE10 is not coming with 7.8 update after all?

  • @ No, Flip Ahead is not available on IE10 for Windows Phone 8.

  • So what about Flip Ahead? Is that available on Phone IE10?

  • @Stilgar, @abm Please note that date,Time, color or calendar are not supported at this time

  • abm
    268 Posts

    Stilgar, yes they are supported. Here is the guide you may like to look at: msdn.microsoft.com/.../hh673544(v=vs.85).aspx

  • Stilgar
    10 Posts

    Are the HTML5 forms (advanced input types like Date, e-mail, etc.) supported?