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?
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.