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.
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
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” ?