Is there a way to use the same CSS stylesheet for print media and the default layout?
-
19-09-2019 - |
Question
I am looking for a way to use the same stylesheet for print media as for the default onscreen layout. The advantage to me will be that I won't have to update 2 files every time I update the CSS. I would prefer to have one stylesheet and specify special rules for print media by denoting them somehow… It may not be possible, but I thought I'd put the question out there.
Solution
There's this syntax, although I honestly don't know if it's supported across all browsers (it should be):
@media print {
body {
background: #fff;
color: #000;
}
/* etc */
}
OTHER TIPS
If you want the styles to be the same across all media, just define the common styles in the stylesheet as normal (i.e. not in any media rule) then put the media specific elements in the relevant rules.
If you want some styles to apply to a subset of media, you can do it like this:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
Here's a link to the relevant W3C page