Question

I’m trying to figure out how to structure my CSS files (which are quite numerous by now), and I’m wondering whether there is any actual difference between having:

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

or having:

@media print {
   definitions
}

I’m asking from the browser’s perspective. Are both equally well supported? Can I not care?

Or is one clearly superior?

Answer 1

According to http://www.w3.org/TR/css3-mediaqueries/ the use of @media ... in CSS files has been supported since HTML4 and CSS2.

“The ‘print’ and ‘screen’ media types are defined in HTML4. The
complete list of media types in HTML4 is: ‘aural’, ‘braille’,
‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines
the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’.
Also, ‘all’ is used to indicate that the style sheet applies to all
media types.”

CSS3 expanded the use of @media ... to also allow media queries to be used, these are also documented on the w3.org page I linked earlier.

Usage of media types is also documented here:

http://www.w3schools.com/css/css_mediatypes.asp

Here is a list of support for media queries:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

As far as I can tell; use of @media screen, print, ... is very widely supported, however the newer media queries that you can use are only supported in CSS3 compatible browsers.

Edit: There is even more info about this here:

http://www.w3.org/TR/CSS2/media.html#x2

I wouldn’t worry about support for using @media ... this way.