Embracing All Media for Your Message with CSS3 Media Queries

Some media, of course, the developer doesn't need to worry about -- you don't need to track (AM)OLED technology, for example, in order to develop for mobile.

But at some level media do matter, and for these the developer has often been forced to make some tough decisions.

For example: you want to display lots of site navigation on the user's screen -- but you don't want your site navigation to print, because hyperlinkable paper hasn't become cheap enough yet.

CSS2.1 could already handle the coarse-grained distinction between screen and print styles. The code to do this was simple, e.g.:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

in the html doc and

@media screen {
  * { font-family: sans-serif }
}

in the css file.

Print and screen were by far the most common media types, though a few other 'media types' could also be specified in HTML4/CSS2 (braille, for example).

But these days, while 'print' means more or less the same as it did ten years ago (at least until e-ink and OLED destroy all competitors), 'screen' really doesn't. In fact, with resolutions, form-factors, and even contrast-levels proliferating like lop-eared rodents, modern web developers need to worry about perhaps a dozen different possible display media. 

Wherefore was introduced the new CSS3 Media Queries specification: not a larger set of media types, but a way for CSS to ask and receive true/false information about the user's display (or, in principle, other media type; but realistically this probably means screen).The CSS3/HTML5-compliant browser can then make styling decisions, specified in the style sheet, depending on the true/false answers to these queries.

For example, instead of specifying a media type (media=print), an HTML5 <link> tag can specify a stylesheet to follow depending on media properties:

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

and a stylesheet can run logical checks on media properties using CSS grammar (roughly the same as CSS2.1 grammar).

CSS3 can query lots of media features:

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color-index
• monochrome
• resolution
• scan (progressive or interlaced)
• grid

some of which would have helped in the old GeoCities days (e.g., width), others will probably become useful only in our highly graphical HTML5 future (e.g., scan).

This is all really cool -- foundational if not sexy (unless you like circuits, in which case it is sexy) -- but might be easier to follow in another medium.

So here's a little video of David Powers speaking at the latest London HTML5 User Group meetup, with full explanation and quite a few notes on browser and device support.

Enjoy -- on your desktop! or iPad! or Lumia 800! or any medium whatsoever.