Mar 9 2009

Media Queries and the iPhone

Most of us are aware of how to specify media types to serve different stylesheets; the two types most used being 'print' and 'screen'. However, it wasn't until I researched a way to specify stylesheets by device that I stumbled across Media Queries.

Media Queries is currently a working W3C draft and part of the CSS3 effort, even though it was originally submitted in 2001.

A media query consists of a media type and zero or more expressions to limit the scope of style sheets. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

An example of how to write a media query:

<link rel="stylesheet" media="screen and (color)" href="example.css" />

Since this is a CSS3 feature, most browsers aren't going to support it yet. However, it works with Safari and should fail gracefully elsewhere. If you need to serve an iPhone-only stylesheet just set media to:

only screen and (max-device-width: 480px)

Sadly, no one has left a comment.