Kilian Valkhof

The CSS media types

Something I recently ran into for a project were the CSS Media types. We all know about <link media="print" />, but that’s only scratching the surface. I didn’t find a nice, all-encompassing article about them either, so I decided to make one myself: The CSS media types, and what you can do with them.

What are media types? #

Most people know CSS as the mark-up language to make pages more pretty on your screen. However, the makers of CSS constructed it in a way that would allow CSS to mark-up pages in less traditional environments. For example, you can use CSS to tell a screenreader how to read a page, or you can use CSS to make sure your phone doesn’t load that 1000x1000px photographic background. Well, in theory anyway (more on that later).

In short, the CSS media types allow you so send different CSS to different devices.

What media types are there? #

CSS2 currently defines 10 media types:

All

Take a guess ;) . This defines CSS for all devices.

Aural

For screen readers or other ‘speech synthesizers’.

Braille

For use in Braille tactile machines.

Embossed

A slight variation on Braille, apparently, meant for Braille printers. (And thus offers pagination.)

Handheld

For use on your cellphone or other hand-held devices.

Print

Dead-tree format, I’m sure you’re familiar with it. Pagination included.

Projection

For use with beamers or on overhead print sheets. (And thus offers pagination.)

Screen

The most familiar one, the one you always use when working on computer screens.

Tty

For use with a fixed-pitch character grid. (old LCD screens, terminals, old hand-held devices.)

tv

For, you guessed it, Television. or: low resolution, limited scrollability and sound available.

Got that? Now forget them all, there are really only 4 that currently matter: all, screen, print and projection. Projection currently only works in Opera, screen and print however, work in all modern browsers. For the rest: Aural works in a Firefox extension called firevox. Handheld, despite the obvious benefit it would have, works nowhere (Handheld makers use the screen media type, or just plain ol’ don’t use anything). No one has ever heard of the other media types being used.

How to use them #

There are two ways to specify a media type: in your HTML and in your CSS. Both have their merits and disadvantages.

In HTML #

To specify a media type in HTML, you can use the media=” ” attribute on your link element calling your CSS File:

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

As you can see, you can define multiple media specifications by comma separating them.

If you want to define different CSS for different media types, you will have to separate them in different CSS files, ordering them nicely and saving bandwidth with files that don’t need to be downloaded for your media type. (I’m not certain if browsers actually do that.)

In CSS #

By wrapping (parts of) your CSS in an @media {} construct, you can define the media type for that part of your CSS:

@media screen {
	body {color:#f00;}
}
@media print {
	body {color:#000;}
}

Alternatively, you can also specify a media type when importing a stylesheet, though it does not work in Internet Explorer:

@import url("print.css") print;

By placing your media types all in one CSS file, you can save http requests by not having to load multiple CSS files. There is a slight overhead with “unused” CSS for your media type, though.

So, what can we use it for, today? #

Nowadays, print is where it’s at. Designers add a lot of visual elements to web pages that don’t necessarily need to be printed. The easiest and simplest way to help your users here is to add an @media print to the bottom of your CSS file, and set stuff like your navigation, sidebar and footer to display:none;, change your colours to simple black/white and reset background images to none. (Most browsers already do this for you, but it’s always better to explicitly specify it.)

Bonus! Media types in the future: CSS3 #

CSS3 adds some interesting stuff to media types, which is renamed to media queries (already a candidate recommendation). A media query consists of a media type and media functionality such as width, height, ratio or color. For example, you can not only target screen, but also “screen‘s less than 800px wide”. This gives you a much wider range of design options for different screen widths. The actual media types will remain the same as CSS2/HTML4.

Media functionality #

This is where it gets possibly interesting (depending on the implementation), media functionality is basically a way to test for specific option in a true/false way, for example, “if the width of the rendering area is smaller than 800 pixels, do this” or, “if the ratio of this device is 16/9, use this CSS”. To review them all here wouldn’t be useful, those really interested could read the w3c page on css3 media queries. It shows some, in theory, powerful ways to cater to different media types and is definitely something you should have seen once.

Conclusion #

While all the media types aren’t going mainstream any while soon, the ones we can already use are certainly of the more interesting ones (screen and print). We can already take advantage of them now in a way that helps our users. The future leaves to be speculated about though, because we’ll just have to wait and see what will happen with CSS3.

Update
A small update is in order here. The above doesn’t talk about the handheld media type. Most mobile browsers available completely ignore it. Some mobile browsers (such as opera mini and IE mobile) support it, but the effective CSS is quite different between those and other mobile browsers. For example, IE mobile loads in parts of the screen CSS as well. You can use the media type already, but YMMV.

What is your experience with CSS media types? Share in the comments! :)