3

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Daniel Magliola
  • 30,898
  • 61
  • 164
  • 243

2 Answers2

4

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.

Seer
  • 5,226
  • 5
  • 33
  • 55
  • 1
    Thank you for your answer. Do you know of any resource that documents which browsers would support each? – Daniel Magliola Jan 31 '13 at 14:15
  • 1
    I've just realised, my answer is wrong! I'm going to correct it now, one moment... Edit: I've updated the answer now. – Seer Jan 31 '13 at 14:15
0

I would just use @media print, you won't have to make the additional call for a stylesheet if the user decides to print. The only thing you are giving up is the extra few KB on your stylesheet, but I'd say that's not a bad price to pay for consolidating all your styles.

lockedown
  • 594
  • 6
  • 15