File Under: Browsers

How to Get IE 10 Playing Nice With Responsive Websites

Windows 8 will arrive in consumers’ hands later this week and with it will come the first official release of Internet Explorer 10.

It used to be that a new version of IE meant a new set of headaches for developers, but thankfully that’s no longer the case. In fact, when it comes to web standards support IE 10 stacks up pretty well against the competition.

IE 10 adds support for nearly a dozen new HTML5 APIs like Web Sockets, Web Workers, the History API, the Drag and Drop API and the File API. You can look over a complete list on Microsoft’s IE 10 Guide for Developers. There’s plenty of CSS support in this release as well; Animations, Transitions and Transforms are among the many new CSS tools. IE 10 also has experimental support for next-gen layout tools like CSS Grid Layout, CSS Multi-column Layout and CSS Regions.

For all that is good in IE 10 there are a couple of gotchas web developers should be aware of.

One is that, while IE 10 supports CSS Flexible Box Layout, it appears to support the older, now non-standard version of Flexbox (the documenation still uses the old syntax). Hopefully Microsoft will fix this with an update, but for the time being only Chrome and Opera have implemented the updated Flexbox syntax.

The other quirk of IE 10 is related to how the browser behaves on Windows 8 tablets. There are two “modes” in Windows 8, the classic desktop and the Metro UI. When IE 10 runs in Metro mode (which is the default) there’s a feature that allows you to “snap” a window to the side of the screen so you can have a browser window open alongside other applications. It’s a nice feature for users, but it has one quirk developer should be aware of — when snapped, IE10 ignores the meta viewport tag for any viewport smaller than 400 pixels in width. That means that your responsive layouts for smaller screens won’t trigger in snapped mode and your site will be scaled instead. Luckily there’s a fix. In fact developer Tim Kadlec has two solutions, one that uses pixels and one that does not. See Kadlec’s blog for full details.

It’s also worth noting that Microsoft is supporting the @viewport declaration rather than the viewport meta tag (IE 10 uses the prefix: @-ms-viewport). While the viewport meta tag is more widely supported (and used), it’s not currently part of any W3C spec, draft or otherwise. For more on @viewport, see the Opera developer blog. (Opera is currently the only other browser supporting @viewport.)