Select a language to translate this page!
Powered by Microsoft® Translator
Ensuring that your site works great on Windows Phone 8 is easier than ever, thanks to extensive HTML5 support in Internet Explorer 10. You might currently target WebKit on a site specifically optimized to support iOS or Android. Now, it’s very easy to adapt a WebKit-optimized site to also support IE10. This means you’ll have less code to maintain and you’ll give your customers a better experience. Even better, the vast majority of changes you’ll make will make your site more compliant to the HTML5 standards!
This guide walks through a collection of tips, best practices, and code samples to help make adapting your WebKit-optimized site for IE10 even easier. This guidance was compiled as our team worked with a number of popular sites across the web to adapt their own WebKit-optimized sites for IE10. We feel confident that this post addresses many of the updates you’ll need to make for your site as well.
Step 1: Detecting IE10 on Windows Phone 8 Step 2: Ensuring standards mode Step 3: CSS and DOM API updates Step 4: Updating touch and pointer events Step 5: Handling nonstandard behaviors Call to action
If you’re running user-agent detection on your site, either on the client or server-side, the first step is to update that detection to treat Internet Explorer 10 the same as WebKit-based browsers. This gives you the baseline you need to start adapting the code to also support IE10. We have published some best practices about detecting IE10 using the user-agent, but for now here’s the user-agent string to expect for IE10:
After this process is complete, if there still are differences between WebKit and IE10 that affect your site, try to adopt feature detection and other best practices for writing cross-browser code rather than user-agent detection. In particular, it’s very important to ensure that IE10 on Windows Phone 8 gets HTML5 video rather than Flash-based video.
As part of this, you should also update any third-party libraries, for example, jQuery Mobile, or other service providers to ensure that you get their latest browser support. For example, if you use Typekit, you’ll want to republish your custom font kit, or if you use Ooyala for video, you’ll need to update to their latest player.
The next step is to double-check that Internet Explorer 10 will render your site in the most standards-compliant mode. Using standards mode provides the greatest support for the latest standards, such as HTML5, CSS3, SVG, and others, as opposed to some of the older modes such as “quirks mode” which are supported for backward compatibility. For most sites, this won’t require any work because standards mode is the default. The easiest way to be sure is to include the HTML5 doctype at the top of every page:
<!DOCTYPE html>
Standards mode also is the default for valid HTML 4.0+ and XHTML 1.0+ doctypes, as long as they don’t specify “Transitional”.
If you’re testing your web pages on a local network (or “localhost”), you will need to temporarily force standards mode because IE defaults into a backward-compatible mode for intranet sites. You can do this by adding the following tag to the <head> tag of the page, or by adding the equivalent HTTP header:
<meta http-equiv="x-ua-compatible" content="IE=edge" />
After you have deployed the site to an internet domain you can remove the <meta> tag because it will no longer be needed.
Some examples of scenarios to avoid that would push your site out of standards mode are:
Now you’re ready to make some code updates. The simplest set of updates is to target any WebKit-specific CSS or JavaScript calls where there is a standards-compliant (unprefixed) or Microsoft-prefixed version that has the same behavior. Your site may already include a broad set of prefixes as a best practice. Beyond that, there may be a few other CSS updates or behavior differences that require a bit of refactoring.
The first set of properties we’ll look at are unprefixed properties. These are CSS/DOM properties that initially shipped under the WebKit prefix (for example, with “-webkit”) but have since shipped in Internet Explorer 10 and other browsers in an unprefixed format. Fixing these up is as simple as making a copy of the line, and then removing the “-webkit” prefix on the copy. Adding these lines also will help provide support for other browsers which don’t use WebKit.
Note that this applies to CSS properties as well as the equivalent JavaScript calls. For example:
Here’s a listing of commonly used WebKit CSS properties and their standard (unprefixed) format supported in IE10. Each has an equivalent style property that can be accessed via JavaScript. For example, border-radius in CSS can also be accessed via object.style.borderRadius in JavaScript.
Other, less frequently used properties also are supported as unprefixed, such as CSS Multi-Column Layout.
The following WebKit-prefixed properties also have the same behavior in Internet Explorer 10 but require Microsoft vendor-prefixing (for example, with the prefix “-ms”) because the corresponding standards have not progressed far enough at the W3C to be unprefixed. You can read more about the Microsoft approach to this process here. Note that while you are adding the “-ms” version, you can also choose to add an unprefixed version to be forward compatible.
The CSS gradients syntax has been updated during the standardization process. Specifically, the gradient type (for example, linear or radial) has moved to the property name, and there also are differences in how you specify the gradient line and colors. For the full details on the Internet Explorer 10 supported syntax for gradients, see Gradients (Windows). For example:
The syntax for setting Flexbox orientation has changed in Internet Explorer 10. For IE10 supported Flexbox syntax, see Flexible box ("Flexbox") layout (Windows). For example:
If an image is used as a hyperlink, by default Internet Explorer draws a blue highlight around the image to emphasize that this is a hyperlink; WebKit doesn’t do this. An easy way to turn this off is to explicitly specify no border for hyperlinked images using the following CSS:
a img { border: none; }
Internet Explorer 10 doesn’t include support for CSS border-image. To preserve the layout of your page, a best practice is to specify a solid border-style fallback so border widths, padding, and margin are preserved. (If IE doesn’t find a supported border type, it will discard those values.) For example:
WebKit and Internet Explorer 10 handle touch event handling differently. WebKit supports a touch interface that is separate from mouse handling; IE10 groups touch, mouse, and stylus into a single interface (pointer). The pointer event model also has been submitted to the W3C for standardization under the Pointer Events Working Group. Although they are different, the models are generally similar, so support for pointer events can generally be added with minimal code changes.
The pointer API uses a standard “down, move, up” event model. Therefore, it’s simple to hook up listeners for existing event handlers to pointer events.
if (window.navigator.msPointerEnabled) { this.element.addEventListener("MSPointerDown", eventHandlerName, false); this.element.addEventListener("MSPointerMove", eventHandlerName, false); this.element.addEventListener("MSPointerUp", eventHandlerName, false); } this.element.addEventListener("touchstart", eventHandlerName, false); this.element.addEventListener("touchmove", eventHandlerName, false); this.element.addEventListener("touchend", eventHandlerName, false);
If all of the events are being handled by a single listener, for example, by the “eventHandlerName” value in the preceding example, you’ll need to separate them out into individual handlers based on the event type. These are easily mapped to existing handlers:
As noted earlier, the pointer event model fires separate events for each touch point. Therefore, if you only want to handle the primary touch point (for example, for a single-touch drag scenario), you will need to filter out non-primary touches using the following line at the beginning of your “up” and “move” event handlers:
if (window.navigator.msPointerEnabled && !event.isPrimary) return;
The pointer event model fires separate events for each touch point, so there is no need to retrieve a specific index from the touches collection. The coordinates are exposed directly from the “event” object using the pageX and pageY properties. This can easily be incorporated into existing code as follows:
One advantage of the Internet Explorer 10 model is that mouse input is handled with the same events! Because of this, IE10 fires “move” events when the mouse is hovering over the area. In scenarios such as single-touch drag, you would want that event only if the mouse button is held down while the user is moving the mouse. You can detect that at the beginning of your move event handler by using the pointerType property as follows:
if (window.navigator.msPointerEnabled && ((event.pointerType == event.MSPOINTER_TYPE_TOUCH && event.buttons != 1) || !event.isPrimary)) return;
In addition to none, IE10 on Windows Phone 8 also supports the pan-x and pan-y properties, which specify that the browser should handle horizontal or vertical gestures, and custom JavaScript handlers should handle everything else.
A final category of updates is related to scenarios that don’t have an associated W3C standard; WebKit and Internet Explorer 10 approaches are different. In all of these cases, the WebKit and IE10 solutions can coexist on a site without any problems.
Some mobile browsers, including Safari on iOS and Internet Explorer on Windows Phone, display a translucent highlight when elements with hyperlinks are tapped, to provide additional feedback to the user. However, many sites want to disable this default behavior to have greater control over the look and feel of their site.
Note that the msapplication-tap-highlight tag only needs to be applied once in the <head> of the page and applies to the entire page. The tag is specific to Internet Explorer 10 on Windows Phone, and does not apply to Internet Explorer 10 on Windows.
The “-webkit-appearance” CSS property defines WebKit-specific behaviors to change the appearance of controls to resemble native controls. In many cases, this is the default behavior in Internet Explorer 10 and therefore isn’t required.
However, one specific, commonly used scenario for “-webkit-appearance” is to disable the drop-down arrow that appears on <select> elements so it can be styled with a custom look such as a background image. When the arrow is removed, the text-indent value usually is set to ensure that the text of the drop-down list items doesn’t show up on the page. (However, it will show up in the control that pops up when it is tapped). Here’s how to achieve the same effect in IE10:
This guide covers the most common changes required to make your WebKit-optimized site work great on Internet Explorer 10 and other standards-compliant browsers. If you have other tips that aren’t covered, please share them in the comments!
In many cases, the actual code changes to your site will be minimal, depending on the features being used on your site, and on existing best practices used in your code. So go ahead and make the best your site has to offer available to Windows Phone 8 users!
Nice guide... pity that separate naming is used (again) e.g. for MSPointerDown instead of touchstart. If the same naming convention was used, lots of stuf would have worked out of the box. Now all those things need modifications
This is cool, and I see why using the MSPointer terminology (to work for mice, fingers, etc etc) makes sense as a way to unify pointer interactions.
In other news, it feels as though MS aren't going to provide us with a backup and restore solution for games, SMSes, etc, from WP7 (vote here if you want this: windowsphone.uservoice.com/.../3306540-wp7-8-device-backup) and even the WP8 backup - incredibly - doesn't do all of that. What's the story, MS? Can we even remotely trust you with our stuff, or will you just drop us again in two years the way it feels you're dropping your loyal early adopters?
Quick note regarding the event listeners listed under <strong>Step 3: CSS and DOM API updates</strong>, <strong>Unprefixed properties</strong>:
Adding listeners for <em>both</em> "webkitTransitionEnd" <em>and</em> "transitionend", would create duplicate listeners for any WebKit browser that understands "transitionend", because it will <em>still</em> understand "webkitTransitionEnd" too...
Nice list, otherwise!
Atg
At the end of step 2 -
"remove the head completely"
s/head/header
Do not remove !
Step 3, gradients section -
"Recent versions of WebKit also support the same syntax"
Unfortunately, it does not. It supports a closer syntax, but not identical -
1. There is still no support for "to bottom", there is only support for "bottom".
2. 0deg means left to right, instead of bottom to top.
3. The unprefixed version is not yet supported.
See bugs.webkit.org/show_bug.cgi for updates.
Step 3, in general -
Encourage more forward compatible practices. Do not specify only -webkit and -ms versions. Add the unprefixed syntax for a slightly less biased guidance. It is not only your web.
*"Do not remove !" should have been "Do not remove <head>!" (unless they does not show up as well, it was missing (opening angle bracket)head(closing angle bracket)).
robble, that's true that WP7 doesn't have SMS backup. BUT WP8 does have SMS back up.
otherwise
+3 for uservoice request for "apps data and settings" backup.
well microsoft shood allso ensure to support WEBGL and all the ISO STANDARDS REGARDS TO GRAPHICS CARD
not try to invent your own standrad, as you all ways do
the last ISO with is standard is javascript , on all platforms
or wait ,, microsoft forces developers to use microsoft version typescript
insted you shood try to make a product that actuly works for a change
AND FOLLOW THE ISO STANDARDS LIKE APPLE AND GOOLE, WEBOS, AND THE OTHERE OS OUT THERE
Michael
phistuck - Thanks for the feedback!
You are right that "head" should have been "header". This has been updated.
Good point also on WebKit lacking support for unprefixed gradients in latest versions. That statement has been removed.
And finally, another good point on adding unprefixed syntax also even if it is not supported yet. I added a sentence suggesting that.
Michael Hansen - TypeScript outputs cross-platform JavaScript. It is an *optional* way to get better type-checking, modularization and tools support for JavaScript projects. No one is forcing it on anyone :)
From www.typescriptlang.org/: "TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment."
aarontgrogg - Thanks for the feedback! I have tried a test page that registers both event listeners in a WebKit browser and the "transitionend" handler only fires once per transition. My understanding is that it is smart enough to remove duplicate listeners that have matching events and handlers.
Has anyone else noticed comments from "Michael Hansen" on various posts (every post)? Not only his comments doesn't make any sense, I am guessing this guy is mentally sick.
This is a nice and well researched post, highlighting a major issue. It would add greatly to your post and message, if you covered non-IE browsers as well. While advocating making sites not to be WebKit only, we shouldn’t advocate to be WebKit and IE only.
Much of the advice will work in multiple browsers, but there are some cases where you supplemented the webKit prefixes with MS prefixes. In these cases, such as the Flexbox section, the prefixless version using the new syntax, should also be added to make it future proof and make it work in modern Opera and Firefox. Adding the Opera and Firefox prefixes for border-image is another example.
What I'm missing here is a way to actually test. I'm running Windows 8 now, so at least I could test against that and probably get some compatibility, but I don't own a Windows Phone (or an iPhone for that matter) so testing against those is difficult. I usually end up testing against Android and desktop Safari, then shipping everything to a friend who owns an iPhone and an iPad, but that's not even a practical solution now, never mind if I was testing against Windows, Blackberry and so on. So where's the self-contained emulator (that's not part of a big SDK download) that I can use to test with? (The same request goes to Apple BTW)
How about helping us up and providing non Windows developers limited testing VMs.
That way it's not a crime to support your browsers.
Dear MS, use webkit.
Thanks.
@flypaperagency @hans_schmucker
To get IE10 for Windows Phone 8 Download and Windows Phone SDK 8.0 from dev.windowsphone.com/.../downloadsdk. 8.0 contains both emulators for WP7 and 8
To simply test the response of web-server when IE-Mobile's user-agent string is found. Open IE10 desktop > press F12 > Tools > Change user agent string > IE10 for Windows Phone 8 (or WP7 or Xbox etc.)
Note: WP7 emulator doesn't have many requirements but WP8 emulator requires Second Level Address Translation (SLAT) capable hardware running Windows 8. SLAT is virtualization technology sometime called Rapid Virtualization Indexing (RVI). Intel Core i3 and above CPUs have this technology. Intel call it "Extended Page Tables (EPT)" while in AMD CPUs its called "Nested Page Tables (NPT)".
@blogmon,
Please ask your beloved Apple and Google to use latest Trident, and stop competing with their daddy.
Have you considered working with other non-Webkit-using browser vendors, like Mozilla and Opera, to produce a set of best practices which will see sites work in all those browsers, rather than a set which make IE 10 work specifically? This would both help web developers, who would have all the info in one place, and make it more likely that you would be effective, as there would be more manpower on the evangelism job and a larger percentage of the market at stake.
If you are interesting in working with Mozilla, contact Lawrence Mandel - lmandel at mozilla dot com.
I'll care once IE gets caught up enough to matter. Does IE 10 have webgl at all yet?
Ha ha ha, you IE guys disregarded and violated the web standards for decades - forcing us web developers to use your stuff - we hated it! Now you're not the big dog anymore, you want us to take care?!
Forget it!
My IE-optimization is a notice saying - please use another browser!
I can not support IE10 without being able to run it.
How should i test on mac and linux?
Do you expect me to buy windows just in order to test on IE?
Why did you choosed to introduce listeners which start with "MS"?
Do you expect the rest to adopt that?
Or do you add listeners without that "MS" later on, and i have to touch that code again?
What would have been so bad about just doing it like webkit and firefox and call it touchstart, touchmove, touchend?
YEAH RIGHT. Over half of my professional career I've had to deal with MS BS. Avoiding standards in favor of proprietary solutions, horrible layout bugs, filters, transparency, and now you want me to use MS prefixed pointer events? Just when I finally started to lay off of IE (As things in IE9+ finally tend to work how they should), you go and do this. I'm going back to telling people to stay the hell away from IE. I may even create a new "This site is best viewed in anything but IE banner". I'll give you -ms- prefixes, as that's a standardized solution, but that's it. And I'll be charging extra for phone Windows Phone integrations.
USE THE STANDARDS. PERIOD.
Webkit the new IE6? It would have to suck in the first place. I like the Windows Phone interface. Too bad I have to go back to telling people why a Windows phone will suck.
Haha it really takes humor from u guys to come here and really want us to use the -ms-prefix.
A. After two years of WebKit supporting lots of CSS3 properties...
B. Giving out an IE 10 in late 2012 who even does NOT support all properties ..
C. Making Outlook 2007+ use the Word engine to render HTML (!) ..
U maybe still dont get that we used double effort for every website, every blog and every HTML-Newsletter to make it look the same in IE like it looked in every other browser...
L.O.L
I made and small abstraction layer aichi.github.com/Touchr which mimics all touch events in IE10 so you can past it in your old page and it should work without any other changes on the page.
Helpful post.
For properties that have ms as prefix I don't have a problem but when you have property like:
box-orient (-webkit-box-orient) and you name it to -ms-flex-direction do you know something? I will not write something like this.
Or other cases specific to IE ... sorry but no. I prefer to educate users to use a real browser!
@darkyndy: That flexbox syntax was the correct one when Microsoft were adding support into IE10. The final syntax changed after it was implemented. I’m pretty sure MS will update it in the next version to the unprefixed new syntax. I got caught out with the same issue when writing the Flexbox section of Smashing Book 3. That version looked to be the final one at the time.
How should I be making a page fit to "normal" visible mode in IE10 on WP8? I've successfully used this combination to run websites nicely in WP7.5 and IE10 in skinny Metro mode:
In the page itself:
In the CSS file:
@-ms-viewport {
width: device-width;
}
However, on my Nokia 920, the page is back to fitting the screen with tiny text. What has changed?
la5rocks What you are seeing is a different in behavior with device-width from the CSS -ms-viewport and the viewport META tag. I'll blog about this in a few weeks but in a nutshell the legacy META tag resolved device-width to 320px independently of the device and then adjusted the optical zoom level to fit on the screen. For -ms-viewport device-width means the width of the display, in a 920 it is 768px and the optical zoom level is always 1.
You can still use the -ms-viewport to get the old behavior but you have to use the actual pixel count; please note that, since it also works on IE10 for Windows, you may need to use device detection to ensure the viewport is appropriately set.
Ok, this code must be wrong?
if (window.navigator.msPointerEnabled && ((event.pointerType == evt.MSPOINTER_TYPE_TOUCH && event.buttons != 1) || !a.isPrimary)) return;
You use "event", "evt" and "a" in the same if statement... Should be "event" for all the cases right?
andmag - Yikes, you're correct! The post has been updated.
I wish I had found this earlier when doing some transitions from our webkit-based webapp to IE10.
One thing that we use in webkit that wasn't here is -webkit-text-stroke. Instead of, eg -webkit-text-stroke: 1px #abc123; you can use text-shadow: #abc123 0px 0px 0px 1px;