16

On Mozilla's page about media queries, it says:

The only keyword hides style sheets from older browsers that don't support media queries:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

However, further down the page it also says,

Media queries involving unknown media types are always false.

So how can a browser not supporting media queries show the stylesheet when it's set to screen and (color)? It wouldn't understand and color so shouldn't show it? And if Mozilla is referring to browsers with literally zero support for the media attribute, why would adding only stop them from showing the stylesheet?

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

Community
  • 1
  • 1
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290

2 Answers2

19

If unknown media queries are always false, why does screen and (color) show the stylesheet but only screen and (color) not?

Previously the media attribute was used for media types, rather than media queries. The spec has since extended the use of this attribute to also support media queries.

An older browser would expect to see a media type (e.g. screen, print, etc.), and wouldn't support a media query (e.g. screen and (color) and (min-device-width: 800px)).

Without the "only", an older browser is allowed to interpret screen and (color) as being the screen media type. Prefixing it with only prevents this from happening.

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

The browser knows whether it supports a particular doctype or not, which is part of the HTML document you send. If the doctype is one that permits media queries, then a conforming browser will either handle it (because it conforms) or ignore it (because it doesn't know how to handle that doctype, and makes a best-case effort).

As you suspected, implementations that don't understand it typically don't parse it. Browsers are expected to follow the robustness principle:

Be liberal in what you accept, and conservative in what you send.

Rather than erroring out or doing something obtrusive or unusual, the default is to pretend that the unknown element doesn't exist at all.

Similarly, you probaly wouldn't experience any ill effects if you write a link that has a strange attribute, like:

<a href="http://google.com" unknown-attribute="foobar">Google</a>
John Feminella
  • 303,634
  • 46
  • 339
  • 357
  • That doesn't answer the question about the discrepancy between the two statements. If unknown media queries are always false, why does `screen and (color)` show the stylesheet but `only screen and (color)` not? – DisgruntledGoat Feb 15 '12 at 00:47
  • Updated! Let me know if that doesn't answer it. – John Feminella Feb 15 '12 at 01:24
  • The HTML 4/XHTML 1 doctypes do not recognize media queries, however as mentioned they do permit parsing media types that are formed like media queries. A browser can parse media queries in HTML 4/XHTML 1 and still call itself conformant - in fact, it's actually a *requirement* for conformance. Additionally, HTML 3.2 and older do not support media descriptors in any way. – BoltClock Apr 17 '13 at 20:00
  • @JohnFeminella As we know that the `@media` rule, introduced in CSS2, made it possible to define different style rules for different media types(e.g: computer screens, printers etc.) and it didn't had `media feature`. So it returns true if the media type matches and it does not care about the `media feature` . So, some older browsers supports CSS2 instead, due to that reason media query like: `@media screen and (min-width: 100px){}` will return true even the screen width is smaller than smaller than 1000px. Right ? – The Chinky Sight Apr 19 '21 at 03:36
1

My guess is that certain pre-CSS3 browsers, which understand only media types, interpret

media="screen and (color)"
media="screen" // `screen` is a known media type; ACCEPT for screen media

and

media="only screen and (color)"
media="only"    // `only` is an unknown media type
media="unknown" // REJECT for any media

Essentially they ignore everything after the first space but treat the remainder as valid.

sam
  • 40,318
  • 2
  • 41
  • 37
  • You don't have to guess when it's already been explained. That being said, your guess is correct on paper, but I haven't actually seen any browsers do this in practice. – BoltClock Sep 29 '13 at 05:28
  • 1
    I'm guessing because I haven't seen an explanation of how older browsers parse `media="only…"`. And certain older browsers **must** do this in practice — that's the whole point of using `only`. – sam Oct 07 '13 at 21:13