IE10 Release: Useful front-end developer tips to prepare.
In case you’ve missed it, Internet Explorer 10 is being released with Windows 8 at the end of October for desktops and tablets as is the Surface tablet. Windows 7 users will be able to install IE10 in the middle of November.
With this release, not only do the worlds of mobile and desktop browsing come closer to each other, so do the worlds of mobile front-end development and desktop front-end development. IE10 comes in two versions: Metro and Desktop with Metro being the default. IE10 Metro is touch optimized and does not support plugins (aka: Flash ) while IE10 desktop does. Both versions will run on tablets and desktop computers.
From a front-end development perspective, there’s a large number of changes to be aware of including long awaited and vastly improved HTML5, CSS3 and touch device support. I’ve put together a couple useful tips to help ensure a smooth transition.
Tip 1: IE10 and Flash content #
If your site is still using Flash and you don’t want to or can’t get rid of all of it in time for the launch of Internet Explorer 10, then it would be smart to prompt users to let Internet Explorer 10 switch into desktop mode. The following code will cause an unobtrusive message to be displayed alerting users that your site would be better viewed in desktop mode with a one-click open option to switch modes.
<meta http-equiv='X-UA-Compatible' content='requiresActiveX=true' />
Tip 2: IE10 and touch device detection #
You may be using something similar to if ('ontouchstart' in window) { } to detect a touch device. This method will not work with Internet Explorer 10.
The following however will work:
if ('ontouchstart' in window || window.navigator.msMaxTouchPoints) { }
This also allows you to determine how many touch points the current device supports. Microsoft’s msMaxTouchPoints documentation
Tip 3: Responsive design, IE10 snap mode, the meta viewport tag and @-ms-viewport #
In short: if the viewport is smaller than 400px wide, IE10 will ignore the meta viewport tag. (Snap mode is one such situation.) Enter @m-ms-viewport. Setting @-ms-viewport width to device width doesn’t appear to calculate the rendering surface of the device, rather it calculates the “snapped” portion of the screen itself.
@-ms-viewport {
width: device-width;
}
This is just the tip of the iceberg relating to front-end development for IE10. I’ve put together a short list of further resources to further assist you along the way.
Further front-end development resources
Windows 8, Surface, IE10, HTML5 has a great overview of what website developers (mobile or desktop) need to know.