A style for every media

CSS media rules are used for styling a web site differently depending on the capabilities of the device used to access it. For example different style sheets can be used for viewing and printing a web site by specifying a media type when linking to them.

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

Another example is responsive web sites that adapt to the available space. Media queries can be used to import different style sheets depending on the width of the browser window.

@import url("phone.css") (max-width: 320px);
@import url("pad.css") (min-width: 321px) and (max-width: 639px);
@import url("pc.css") (min-width: 640px);

We can also use media rules to include or exclude CSS rules inside a style sheet. But that is also the most granular we can get, media rules are not supported inside the style attribute. The following example shows how we can set the text color to black when printing to a non-color printer (though browser support for this is a bit lacking).

@media print and (monochrome) {
    body { color: Black; }
}
@media not print, print and (monochrome: 0) {
    body { color: Navy; }
}

A media query consist of a media type and zero or more conditions separated by and. The media type is optional and is assumed to be all when missing. A condition is always enclosed in parentheses. In its basic form it is made up of a name and a value. For numerical values you can use min- and max- prefixes or omit the value if you just want to check that it is non-zero.

@media projection { }
@media (min-resolution: 80dpi) { }
@media handheld and (orientation: portrait) { } 
@media screen and (width: 640px) and (height: 480px) { }
@media tv and (aspect-ratio: 16/9), tv and (aspect-ratio: 16/10) { }
@media not all and (scan: interlace) { }
@media only print and (color) { }

Note that min and max prefixes are always inclusive. Be careful that you don’t accidentally match two media rules when using ranges. The keyword not can be used to negate the whole media rule. If you need to hide a style sheet from browsers that only support media types and not media queries you can use the keyword only. The media type is not optional when using not or only.

A comma is used to separate a list of queries within a rule. The whole rule will match if at least one query matches (i.e. it is an or operator). There is no or inside a query so sometimes you have to write somewhat repetitively.

Browser support

Media types is an old CSS2 standard and is widely supported. Full media queries is from CSS3, it is not supported by Internet Explorer 8 and below. For other browsers there is at least some sort of support. Things like min-width is probably no problem but when you delve into the more odd features you should test it properly, not every browser may interpret it equally.

I have put together a page that shows which media query rules are matched on your browser. Trying it out on handheld devices can be very educational. Current smart phones will not use the media type handheld for example. This is part of the reason why the current trend is to design around the width of the screen and not the type of device.

A word of warning if you are trying to minimize download size of your site. Even if a browser won’t use style sheet that is linked to with a media query it may still download it.