The bleeding edge of web: media queries

Media queries are extra params for the CSS @media types that you can use to target styles for different devices based the device’s capabilities like dimensions and colour depth. They are part of the W3C CSS3 standard and are supported in the latest vesion of Opera (desktop and mini versions), Firefox and Safari.

Media queries will make it easier to design sites that work well on different devices without having separate sites or browser sniffing. For example you could use a media query to tweak your site’s styles so they will work better on a small screen device like a mobile phone or PSP.

Media queries give a lot more fine grained control over style targetting than the existing @media types like handheld. Should a device like the PSP which is 480 pixels wide display a handheld stylesheet which might have been designed for a mobile that’s only 240px wide or should it display the one designed for a desktop PC’s screen? The best choice will depend on the site’s design. Media queries means that the web developer can make that decision rather than the device browser having to make a one size fits all decision.

Media query syntax

The syntax builds on the existing @media syntax. You declare the type of media that you want the rules to apply to and then any extra query conditions that must be met.

Here’s an example that uses the max-width query to apply a different style for a browser window less than 600px wide:

  1. body { background-color: yellow; }
  2. @media all and (max-width: 600px){
  3.     body { background-color: orange; }
  4. }

You can use multiple conditions connected with the and keyword. You can add not to a condition to negate it:

  1. @media all and (max-width: 600px) and (not monochrome){
  2.     body { background-color: orange; }
  3.     .smallscreen { display: block; }
  4.     .normal { display: none; }
  5. }

Media queries can also be added to the media attribute of an external stylesheet link. Anything supported in an @media block is also supported in the media attribute of the link:

  1. <link rel="stylesheet" href="smallscreen.css"
  2.      type="text/css"
  3.      media="all and (max-width: 500px)">
  4. </link>

What you can query

The most interesting queries to me are the dimension queries because they will makes it really easy to create a different set of styles for different screen sizes. You can query for the viewport size (min-width, max-width, min-height, max-height) or the size of the entire screen (min-device-width, max-device-width, min-device-height, max-device-height, device-aspect-ratio).

The current implementations in Opera and Safari 4 will re-evaluate the viewport queries when the screen size changes so the device width and height might be more useful if you don’t want the page changing its layout when the window resizes.

Here’s an example that uses max-device-height to show a blue on screens of less than 1000px and pink on screens with more:

  1. body { background-color: pink; }
  2. @media all and (max-device-height: 1000px){
  3.     body { background-color: lightblue; }
  4. }

It’s also possible to query thing like color depth and resolution. Have a look at the spec for a complete list.

When’s it coming?

Media queries are the perfect candidate for progressive enhancement. In most cases you can just add them to your CSS for browsers that understand them and the browsers that don’t will just ignore them. The Opera site has a good article on how to structure you queries to make they won’t be displayed by browsers that can’t understand them.

Safari – the current Safari 3 version supports media queries but it doesn’t update dynamically when the dimensions of the window update. Safari 4 does update as the dimensions change.

Opera – media queries are already supported in the current Opera 9.5 release. Opera mini 4 also supports them.

Firefoxsupport added in Firefox 3.1.

IE8 – doesn’t support media queries as of IE8 beta 1. There’s a page on the MSDN site that says they aren’t planned for inclusion in IE8.

Posted on 18 Jul 08 by Helen Emerson (last updated on 18 Jul 08).
Filed under CSS