How do I properly define media types for multiple stylesheets?

Question

I've got a web page that I know is being viewed in various browsers, with mobile devices, etc. I just want to add a printable view.

The current stylesheet link looks like this:

<link rel="stylesheet" type="text/css" href="somefile.css" media="all" />

What I want is to do the equivilent of "if print, use this new stylesheet; else use the original one."

To do that, can I simply add a print stylesheet, like this?

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

In other words, does it make sense to have both "all" to catch any device type I may not be thinking of, and "print" for that specific media?

Answer 1

From the W3C spec:

@media screen {
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
    p.test {font-weight:bold;}
}

Answer 2

The spec clearly says that the all media type means the stylesheet is suitable to all media types.

If this is correct, you are fine to use it.

However, chances are this is not quite the case (is it really suitable for speech?), so you should set the main stylesheet to screen:

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

You can also define media type within a single css file, to signify which rules should be used with which media type using @media at-rules.