Kilian Valkhof

Front-end & user experience developer, Jedi.

The CSS media types

CSS & HTML, 22 October 2007, 4 minute read

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! :)

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Kilian, nice one. This one will get bookmarked.
    Can you not check your cache to see if the ‘alternative’ css files for other media types are getting downloaded…
    Or maybe !yahoo has done the research…

    Cheers

  2. Nice one, thanks. Pretty useful stuff there. Bookmarked also.

  3. This is one more feather to my cap.

    CSS is something I crave for and I love to find more about it. Loved this article.

    Kilian, you rock.

    Cheers.

  4. […] articolo sull’argomento, spuntato circa ieri. Fa una carrellata dei media types effettivamente utilizzati, ed handheld sembra non essere fra quelli… __________________ chezDreadnaut – dailyDreadnaut "Un <BR/> impuro, punto." […]

  5. Matthew Babbs

    Nice article, it’s a useful summary of the state of css media types (including some I didn’t know about!).
    May I disagree on one point? media="handheld" is actually respected by modern browsers, like Opera Mini, the Nokia Webkit fork, and the iPhone Safari. I’d guess browsers for Google’s Android platform will support it too.

  6. Hello Matthew, thanks for your comment, and you certainly may.

    However, the three mobile browsers you name are a really, really small minority in the entire mobile browser market. Practically all phonecompanies release new phones with different browsers with different capabilities (think of: samsung, motorola, LG, SonyEricson etcetera). Most phones in use today are a couple of years old and so have much worse browsers than the three you name.

    I do agree with your point though, the future is looking much brighter for @media handheld :)

  7. […] KilianValkhof.com, a raíz de un proyecto que tuvo que desarrollar su autor, ha publicado un artículo acerca de los tipos de medio de CSS. Los medios de CSS permiten indicar diferentes reglas para diferentes medios o dispositivos: pantalla, impresora, móviles, proyector, etc. Todos conocemos el media="print", pero hay muchos más. En concreto, ahora mismo, se definen 10 tipos en la especificación CSS 2. Aunque en el futuro es muy probable que el número crezca. […]

  8. Damn. I used to think “handhled” was cool…

  9. Interesting article and well worth a read!

    I never knew you could handle different medias within a CSS file.

  10. Interesting article but I don’t Really understand.

  11. […] http://kilianvalkhof.com/2007/css-xhtml … dia-types/ […]

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.