One nice trick you can use is to build your print style sheet to amend your screen style sheet. To do this, simply neglect to reference a medium in your screen CSS link, like so:
This causes your screen style sheet to be applied to both screen and print. Meaning, your print CSS only has to describe the things you want to do differently.
I don’t doubt that this will work, but is this semantically correct? Couldn’t I use
media="all"
instead of just leaving the first CSS link, well, naked?
I think the media= on the link has slightly greater support in older browsers but the difference is so insignificant now as to not be worth worrying about.
I use @media print and @media screen within my one CSS file to distinguish those rules that differ.
I don’t get why this is so fascinating, using the media attributes in HTML is identical to using at-rules like @media screen or @media print within a CSS file. It basically works like adding style to a:hover, you don’t need to wonder why it doesn’t apply to the anchor when there’s no hover in effect. It’s like how a stylesheet will be read by screens (per default) without you needing the @media screen in the CSS or a media=“screen” in the HTML, it defaults to what the browser decides is appropriate. As for overriding style, if you have conflicting CSS values, if it can’t be worked out via specificity it’ll go by the most recent one (the closest to the base of the stylesheet), it only makes sense that declared styles would be overwritten when mentioned later on (for that appearance) - or am I missing something?
Omitting media attribute, as felgall pointed out, means all, so there’s the straight answer. No biggie.
But there’s a little flaw there: if you target other media than this two, then you are going to need to amend your screen style also in the style for third to the nth media, as it will apply to all other media, and only after that you can start building style for these other media. That may lead to extra not less code. And it’s not a better way of programming, but a lazy way with longer shortcuts.
And, no matter how poetically put by Rob Glazebrook, if you really need to, you better make a media all style, and that will be amended by your screen, your print, or any other styles, especially when screen is the most bloated of all.
I’ve probably been using a similar technique for over 8 years, unless I am missing something? I assume it’s just that Max, hasn’t seen it used this way before and wanted to know why it was used and how it got combined.
Specifying media=“all” rather than leaving it out completely (since all is the default) only affects Netscape 4 which disregards any stylesheet with a media attribute.
Because your screen only takes the first stylesheet into account and ignores the second one (as it’s media is “print”), but when printed both stylesheets are taken into account, and rules specified in the print stylesheet override rules specified in the first stylesheet
That’s what I saw Paul O"Brien recommending recently, so I gather it’s perfectly fine. I’ve started to do it that way.
Rather than media=“all”, you can also specify a list of media, too. E.g. media=“screen, print” if you don’t want the main styles to apply to handheld devices.
I guess I’m just a bit surprised that given the two stylesheet commands, with the first one having no “media” value and the second one having only a “print” value, the browsers (even IE) get everything straight and don’t bollix it all up.
Sort of like my friend who, a few years ago, owned a Yugo and was always surprised when it actually started up.
Yes, media=“all” could be used as well.
I just did some googling, and it seems that if you omit the “media” attribute from a link tag, “screen” is assumed.
Why printers seem to honor the stylesheets in those cases is beyond me however.
Maybe browsers take omitting a media to mean “all” ?
