How to import printing stylesheet using @media print query?

Question

I want to move my printing stylesheet into a seperate file to be imported using @media query. I tried the following, but it doesn't seem to work, at least on Chrome:

h1 {
....
}

....

@media screen {
....
}

@media print {
 @import "print.css";
}

How can I do it?

Possible duplicate of http://stackoverflow.com/a/224278/2151120 — Aiias, Nov 30 '13 at 05:33

score 5 · Accepted Answer · edited Nov 14 '14 at 19:11

5

@import supports media types and media queries on its own, so you would pass the media query into the @import statement rather than nesting it in a @media rule:

@import "print.css" print;

Furthermore you cannot add an @import statement to style rules, so in this case you would need to put it all the way on top. If you cannot do so for cascading reasons, you cannot use @import; you need to include the print stylesheet using a <link media="print"> element or similar instead.

edited Nov 14 '14 at 19:11

AJFarkas

2,929
1
17
15

answered Nov 30 '13 at 05:32

BoltClock

700,868
160
1,392
1,356

Umm, but the rules would cascade the wrong way if I put it at the top. – Question Overflow Nov 30 '13 at 05:33
Oh, yes, why I didn't think of using a separate link element. Thanks! – Question Overflow Nov 30 '13 at 05:45

How to import printing stylesheet using @media print query?

1 Answers1