As Internet explorer announced with second Platform Preview last year, IE9 supports CSS3 Media Queries. CSS3 Media Queries enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor. In this post, I talk more about CSS3 Media Queries and the various scenarios they enable. Evolution of Media Queries
Internet Explorer has supported the ‘screen’ and ‘print’ CSS2 media types since IE5. The print media type is especially useful if you want to change your printed page layout. It eliminates the need for Web sites to host a separate print-friendly version of their site and enables some useful print optimizations such as expanding hyperlinks. The CSS 2.1 media types spec includes definitions for many media types including handheld devices, speech synthesizers, and televisions. However, in practice only screen and print were widely adopted. CSS3 Media Queries expands the notion of optimizing for a particular media type by making it possible to optimize for particular properties of the media. ‘Screen’ is a useful media type, but there are many types of screens—from mobile phones with tiny screens to laptops with averages screens to desktop machines connected to widescreen monitors as large as 30"; newer screens may be higher resolution than screens of the recent past. As a Web developer, you may want to reflow your Web page for each of these devices in order to give site visitors the best experience on their device. CSS3 Media Queries enable you to target your CSS as generally or as specifically as you like.
Basic Example
To write a media query which targets screens which are 1250px wide you could write the following (note: ‘screen’ width and height actually refer to the width and height of the browser window, not the physical display):
@media screen and (width:1250px) { ... }
However, targeting a screen (browser) which is exactly 1250px wide isn’t really that useful because it’s not often that the browser window will be exactly 1250px wide. Instead it’s more useful to target a range of sizes, such as 900px to 1300px:
@media screen and (min-width:900px) and (max-width:1300px) { ... }
On the IE Test Drive site you can find a CSS3 Media Queries demo which illustrates the use of a few different media queries to alter the page layout based on your screen (browser) width. The page is optimized for both widescreen sizes and very narrow sizes. To see the effect, be sure to change your browser window size as you view the page. In a widescreen view, the page uses a side by side layout with large images and descriptive text:
In a narrow view, the page uses cropped images and removes the titles and descriptions.
In addition to writing @media rules within your CSS files, you can also use CSS3 media queries in the media attribute of link and style tags and within an @import block. A few examples:
<link rel="stylesheet" media="screen and (min-width:100px)" href="widescreenStyleSheet.css" />
<style type="text/css" media="print and (orientation:portrait)"> ... </style>
@import "widescreenStyleSheet.css" screen and (min-width:100px);
Media Features
In addition to width, IE9 supports the following media features:
- width – width of the display area
- height – height of the display area
- device-width – width of the device rendering surface
- device-height – height of the device rendering surface
- orientation – landscape or portrait
- aspect-ratio – ratio of the ‘width’ to ‘height’ media features
- device-aspect-ratio – ratio of the ‘device-width’ to ‘device-height’ media features
- resolution – resolution of the output device
- color – number of bits per color component of the output device
- color-index – number of entries in the color lookup table of the output device
- monochrome – number of bits per pixel in a monochrome frame buffer (0 if the device is not monochrome.)
With the exception of orientation, all IE9 supported media features can be used with the ‘min-’ and ‘max-’ prefixes.
Next Steps
The types, sizes, and capabilities of the displays that people browse with are growing more and more diverse. CSS3 Media Queries make it easy for web developers to build one site that delivers a great experience on all displays.
If you’ve found CSS3 Media Query bugs in your testing of IE9 Beta or the Platform Previews, please file them on Microsoft Connect.
