Features for adaptive layout

Internet Explorer 10 provides features for assigning different styles, layouts, and scale factors based on the type of display options used. Additionally, Internet Explorer 10 offers new types of adaptive Cascading Style Sheets (CSS) layout methods that make it easier to more effectively use screen real-estate across a wide variety of devices and resolutions.

This topic contains the following sections:

• Media queries
• CSS Device Adaptation
• CSS Grid layout
• CSS Flexible Box Layout
• CSS Multi-column Layout
• Related topics

Media queries

Media queries enable you to tailor your page for your users based on a set of criteria. You can specify a set of styles that will apply to a webpage only when the browser's aspect ratio is, for instance, in portrait mode (its height is greater than its width) or landscape mode (its width is greater than its height). Other media features supported by Internet Explorer 10 include resolution, color display capabilities, and viewing device (that is, the screen as opposed to the browser) aspect ratio. Supported media features starting with Windows Internet Explorer 9 are listed in Media Queries.

As of June 19, 2012, the Media Queries specification reached full World Wide Web Consortium (W3C) Recommendation status. Media queries are supported in most modern browsers, including Internet Explorer 9. Internet Explorer 10 adds support for Media Query Listeners, as specified in the CSSOM View Module.

One of the most common formats of a media query is shown here:

@media all and ( media_feature ) [and ( media_feature ) ] { styles }

In this case, media_feature can be any supported media feature set to a valid value (if applicable). You can optionally add multiple media features to introduce even more criteria. If a browser visiting the page fits the profile described by the media features, the styles are applied to the content.

Media queries can also be used in combination with new layout features in Internet Explorer 10, such as CSS Device Adaptation, CSS Grid Layout, CSS Flexbox Layout, and CSS Multi-column Layout.

CSS Device Adaptation

The W3C CSS Device Adaptation specification provides a way to override the size of the viewport provided by the user agent (UA): the @viewport rule. The @viewport rule (or rather the @-ms-viewport rule in Internet Explorer 10) enables you to specify under what circumstances your page should scale to fit the user's screen, and to what resolutions the page should scale. The @-ms-viewport rule was developed to offer similar functionality to that of the "viewport" HTML meta tag that was first implemented by Apple for the Safari browser in iOS, but in an interoperable, standards-based way. By default, Internet Explorer 10 automatically scales content when the window is narrower than 1024 pixels, such as when the window is in the snapped state or portrait mode. This next example shows a common use for the @-ms-viewport rule. Specifically, this selector can be used to optimize a small version of your webpage for viewing in the snapped state.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

Any viewport smaller than 400 pixels in width (for instance, the snapped state), is laid out to a width of 320 pixels and scaled to fit. The CSS listed underneath it (which has presumably been optimized for a small screen) will be applied.

In cases where this automatic scaling is not needed or desired, such as with responsive web design patterns, the device-width keyword can be used to signify that the page is optimized to work well regardless of the width of the device.

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

The CSS Device Adaptation spec is currently a W3C Working Draft and is supported in Internet Explorer 10 in the vendor-prefixed form (@-ms-viewport).

CSS Grid layout

Cascading Style Sheets, Level 3 (CSS3) Grid layout is new in Internet Explorer 10, and enables more layout fluidity than is possible using floats or script. It enables you to divide space for major regions of a webpage based on either a fixed amount, the available space within the browser window, or a combination of both. With Grid layout, you can align elements into columns and rows without explicitly defining a content structure, thereby making Grid layout a more flexible choice than either HTML or CSS tables. Grid layout works with media queries to enable your layout to seamlessly adapt to changes in device form factor, orientation, resolution, and more.

The CSS Grid Layout specification is currently a W3C Working Draft and is partially supported in Internet Explorer 10 in the vendor-prefixed form. For a full list of supported properties, see Grid Layout on MSDN. Because the Grid Layout specification is still in development, support in Internet Explorer 10 might not correspond exactly to that laid out in the specification.

Here is a simple example of one of the uses for Grid layout. Using media queries and Grid layout, you can configure the layout of a webpage so that it's optimized for either a portrait or landscape orientation. In a portrait orientation, the height of the browser window is greater than its width; in a landscape orientation, the width of the browser window is greater than its height.

The following page layout is configured so that it changes based on its orientation. In landscape orientation, page elements are arranged to take advantage of the available horizontal space. In portrait orientation, the page elements that could spread out horizontally in landscape orientation are moved to the top of the page to take advantage of the available vertical space. This behavior is especially suited for Internet Explorer in the new Windows UI, because the page layout changes based on the orientation of the device itself.

This screen shot shows a page in landscape mode in Internet Explorer for the desktop:

Changing the orientation of the page to portrait changes the layout as shown here:

To learn more and view a similar Grid layout for yourself, see How to create an adaptive layout with CSS Grid.

CSS Flexible Box Layout

Similar to CSS Grid layout, CSS Flexible Box ("Flexbox") layout enables you to reflow, resize, and change the orientation of page elements such as menus and toolbars according to the layout of the page. Flexbox is a powerful tool for easily aligning content on complex webpages.

The CSS Flexible Box Layout Module is currently a W3C Working Draft and is partially supported in Internet Explorer 10 in the vendor-prefixed form. For a full list of supported properties, see Flexible Box ("Flexbox") Layout on MSDN.

Here's a simple example of one use for Flexbox. This example is available from the Internet Explorer Samples Gallery, and demonstrates how to create a toolbar that resizes according to the layout of the webpage. This image shows the toolbar when the page is in landscape mode:

There are a few things going on here:

• The toolbar is placed in Flexbox layout mode (display: -ms-flexbox;)
• The toolbar buttons are set to justify—any excess space between them will be evenly distributed (-ms-flex-pack: justify;)
• The Play button is set to take up more space than the others (-ms-flex: 3 1 100px;)
• The Vol + and Vol - buttons are in their own flexbox and set to display on top of each other (-ms-flex-direction: column;)

When the webpage is in portrait mode (its height is greater than its width), the layout of the toolbar changes to take advantage of the new dimensions:

This is accomplished using a media query (@media (orientation:portrait)), which triggers the following behaviors:

• The toolbar is set to display vertically (-ms-flex-direction: column;)
• The Vol + and Vol - buttons are again in their own flexbox and set to display next to each other (-ms-flex-direction: row;)
• Both the Reverse and Forward buttons have been given higher ordinal group numbers (-ms-flex-order: 2). This means that even though the Reverse button appears before the Play button in the Document Object Model (DOM) order, it will be displayed after the Play and volume buttons in the vertical toolbar, because they are implicitly within ordinal group 1.

To view the entire sample, see CSS Flexbox sample on the Internet Explorer Samples Gallery.

CSS Multi-column Layout

Internet Explorer 10 introduces support for CSS3 Multi-column layout, which enables you to flow content into multiple column boxes, rather than a single content box. You can now create newspaper-like columns for easier reading across different screen sizes and resolutions.

Support for multi-column layout means you can specify:

• the width of columns (column-width, which, when set alone, means that as many columns with the given width will fit into the available space)
• the number of columns an element needs (column-count)
• optional gaps and rules between columns (column-gap and the column-rule properties)
• break behavior between columns (the break properties)
• column spanning (column-span)
• content balancing among columns (column-fill)

The CSS Multi-column Layout Module is currently a W3C Candidate Recommendation and is supported in Internet Explorer 10 without vendor prefix. For a full list of supported properties, see Multi-column Layout on MSDN.

Related topics

Design adaptive websites

Features for adaptive input handling

Send comments about this topic to Microsoft

Build date: 9/24/2013