View source for Evangelism/Firefox3.5/35Days/Articles/Media queries

In this day and age, it's important for web content to support rendering on an increasingly wide variety of devices. Not only do users expect to use your content on their home computer, or read it printed on paper, but they want to use it on handheld devices, cell phones, and assorted other gadgets that have distinct capabilities, both in terms of performance and in terms of display fidelity.

CSS 2 introduced the notion of media types, which allow you to specify different style rules based on what type of device the content is being rendered onto.  For example, you can include a specific style sheet when your content is being rendered for printing like this:

 <link rel="stylesheet" media="print" href="print.css">

This was a good first step; however, this doesn't provide the ability to fine-tune the rendering of your content based on things such as device resolution, aspect ratio, or whether the content is being viewed in portrait or landscape orientation.

Firefox 3.5 supports [http://www.w3.org/TR/css3-mediaqueries/ media queries] -- a new feature of CSS 3 -- which make it possible to define much more precisely what styles to apply under what circumstances.

This works by establishing queries that look at the values of various media features. There are a large number of these, including color depth, rendering area width and height, pixel resolution, whether or not the display is color, and so forth. You can find a complete list in the [https://developer.mozilla.org/En/CSS/Media_queries Mozilla Developer Center article on media queries].

Media queries are quite powerful, but very easy to use.  Take a look at the [http://www.bitstampede.com/demos/media-queries/ example web page] I put together for this article.

The example page uses two style sheets, which are specified using the following rules:

 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

This one uses the media query <code>all and (orientation:portrait)</code> to indicate that the <tt>portrait.css</tt> style sheet should be used if the content is being rendered in a display area (such as the window in Firefox) is taller than it is wide.

 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

This one specifies that the <tt>landscape.css</tt> style sheet should be applied when the content is being rendered on a surface that is wider than it is tall.

What's very cool about media queries is that they are evaluated every time the display mode changes; for example, if you open the [http://www.bitstampede.com/demos/media-queries/ example page] and start resizing the window, you'll find that when the window is wider than it is tall (i.e., it's in landscape orientation), the toolbar is located on the left side of the page.

When you resize the window so that it is in portrait orientation, the toolbar moves to the top of the window. This is done live while you're resizing the window.

If you look inside the <tt>landscape.css</tt> file, you'll find that there are some media queries used there, as well, that override the style of the <code>&lt;body&gt;</code> element based on the width of the window.  By default, the body text is 14 pixels tall.

 @media all and (min-width: 600px) {
   body {
     font-size: 16px;
   }
 }

However, this media query indicates that if the window is at least 600 pixels wide, the font size for the body text should be increased to 16 pixels.

 @media all and (min-width: 700px) {
   body {
     font-size: 20px;
   }
 }

Similarly, this media query makes the body's font size 20 pixels when the window reaches at least 700 pixels wide.  And another, similar media query makes the font even larger when the window is at least 800 pixels wide.

So as you resize the window, you'll see that not only does Firefox automatically switch between the <tt>portrait.css</tt> and <tt>landscape.css</tt> style sheets as the window's width changes, but while rendering using the <tt>landscape.css</tt> style sheet, the styles change based on exactly how wide the window is, too.

Another great use for this is to adjust the number of columns your content is displayed in based on the width of the display area.

Media queries are currently supported by Firefox 3.5, Safari 3, and Opera 7 and later, with successive versions often adding support for additional media features.

You can get details about which media features Firefox supports in the [https://developer.mozilla.org/En/CSS/Media_queries MDC article on media queries]. Opera 9.5's media features support is outlined near [http://www.opera.com/docs/specs/css/ the bottom of this article]. I wasn't able to find specifics on WebKit's media queries support.

Media queries offer a great way to improve how your content looks on a variety of devices; using appropriate queries, you can render differently based on screen size, resolution, and more, thereby optimizing your content no matter how the user is accessing it.