IE10 (Internet Explorer Version 10) Browser

Note: if a website is not listed on Microsoft Flash's White List, the following meta / element is detected by Metro ui ie10 and provides a one-touch option to switch to desktop ie10.

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />

Developer Guidance for Websites with Content for Adobe Flash Player in Windows 8 (Internet Explorer)

ie10 css

ie10 Modes

ie10 running on Windows 8 RT has the modes it can run in:

Landscape Mode/Portrait Mode:

In either mode, ie10 is the only foreground active screen. The default viewport in portrait mode is 1024px.

Snap Mode:

ie10 is sharing the active screen with a Windows 8 Store application, and is snapped to one screen side (right or left), always at the same size. Snap Mode only works in landscape mode and when the min-width of the device is 1366 pixels.

ie10 in snap mode takes up less than 25% of the available screen real estate.

Fill mode:

ie10 in fill mode shares the active screen with a Windows 8 Store application similar to snap mode, however the screen real estate of the two are swapped: the Windows 8 Store application is in snap mode (less than 25% of the screen) and ie10 fills 75% of the device's screen. Fill mode only works in landscape mode and when the device has a minimum width of 1366 pixels.

There is a non-touch optimized version of ie10 that runs in desktop mode, which is the mode ie that we all know and love so well (I'm actually quite partial to quirks mode :)). ie10 desktop mode is on both Windows 8 RT and Windows 8 non-RT.

Server-Side Identification

User agents never include hardware details, so client-side detection doesn't cut it when seeking ie10; there's no way to tell if the user agent is on a Surface or another vendor's tablet. It is possible to search for Windows NT 6.2; when present, you know that the user agent is on Windows 8. Then search for Touch keyword, which tells you the user agent is on a touch device, and search for ARM keyword, which lets you know the user agent is on a Windows 8 RT device.

Why All Web Devs Need To Prepare Their Sites for IE10 and Windows 8

ie10 Issues

ASP.NET ie10 Detection Failure

Certain ASP.NET versions do not correctly recognize ie10's user-string, responding with a _doPostBack is undefined JavaScript error. There are three fixes for this, updating ASP.NET browser definition files machine wide, updating ASP.NET browser definition files site only, and by using the following meta / element:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

ASP.NET Fails to Detect Internet Explorer 10

css Flexbox Support

ie10 supports the older, non-standard css flexbox, which of course includes the old syntax.

Windows 8 Tablet Behavior

Windows 8 comes with two modes, classic and the Metro ui (default). Meto ui mode's snap feature has a bug: when a window is snapped, ie10 does not support the viewport meta element for any viewport that is smaller than 400 pixels wide, so rwd layouts for smaller viewports will not be triggered and instead will be scaled.

css device adaptation is the fix to get ie10 to trigger meta viewport elements for viewports smaller than 400 pixels wide. The example below is recommended by Microsoft:

@media screen and (max-width:400px) {
  @-ms-viewport{width:320px}
}

The @-ms-viewport example above declares that for viewports that are less than 400 pixels wide, ie will set the width to 320 pixels and scale from there. The drawback here of course is that you are setting your width in pixels. Another option is to use the following:

@-ms-viewport{width: device-width}

The above example works because Windows 8 in snap mode does not adhere to the specification, which says that device-width should return the width of the device's rendering surface. Instead, the rendering surface is the snapped portion of the screen.

ie10 doesn't support the meta viewport element because it is not actually a standard, while @viewport is being standardized by the w3c.

ie10 supports the @viewport, using vendor prefix: @-ms-viewport.

IE10 Snap Mode and Responsive Design, How to Get IE10 Playing Nice With Responsive Websites

ie9/ie10 Media Query Version Targeting

ie10 User Agent Strings

• Standard ie10 User Agent String:
• Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
• ie10 User Agent String on Touch Device:
• Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)
• ie10 User Agent String on an arm powered device:
• Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM;)
• ie10 User Agent String on a touch and arm powered device:
• Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM;

10 Things You Should Know About ie10

Compatibility View

ie10 continues the tradition of using ie5 Quirks Mode in Compatibility View for pages without a DOCTYPE, as well as for documents that opt-in via X-UA-Compatible, like so:

<meta http-equiv="X-UA-Compatible" content="IE=5" />

Interoperable html5 Quirks Mode in ie10

Feature Detection via @cc_on

This works because the code is inside of an ie-excluding conditional comment, ensuring that ie < 10 will not recognize it. ie10 and greater will recognize and append the ie10 to the html element:

<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

Style html.ie10{} the same way we apply specific styles via conditional comments:

html{background-color:#000}
html.ie10{background-color:#ff0}

• ie10 css Hacks
• @cc_on JavaScript Statement

<style>@-ms-viewport{width:device-width}</style>

<script>
(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
      document.createTextNode("@-ms-viewport{width:auto!important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  }
})();
</script>

References/Resources

• ie10 Release Notes
• Web Development for Windows Phone
• html/xhtml Reference
• Internet Explorer 10 Guide for Developers
• Internet Explorer 10 Compatibility Cookbook
• ie10 on Windows 8
• Internet Explorer 10
• Internet Explorer 10 Guide for Developers
• Accessibility in ie10