What are the tradeoffs of using media = "print" versus @media print declaration in the stylesheet?
I am trying to figure out how to structure my CSS files (of which there are quite a few) and I am wondering if there is any actual difference between having:
<link href="blah.css" media="print" rel="stylesheet" type="text/css" />
or having:
@media print {
definitions
}
I am asking from a browser point of view. Are both equally well supported? Maybe it doesn't bother me?
Or is one clearly superior?
source to share
According to http://www.w3.org/TR/css3-mediaqueries/ use @media ...
in CSS files is supported with HTML4 and CSS2.
"The print and screen media types are defined in HTML4. The complete list of media types in HTML4:" aural "," braille "," Pocket "," print "," projection ", screen," tty ", tv. CSS2 defines the same list , devalues "auditory and adds" embossing and "speech." Also, "everything is used to indicate that the style sheet applies to all media."
CSS3 has extended usage @media ...
to also allow media queries, these are also documented on the w3.org page I linked to earlier.
The use of media types is also described 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; usage is @media screen, print, ...
very widely supported, however the new media queries you can use are only supported in CSS3 compatible browsers.
Edit: Here's even more info on this:
http://www.w3.org/TR/CSS2/media.html#x2
I would not bother to support usage @media ...
this way.
source to share