2

I recently noticed that I have been using all in every @media query rule and I can't figure out why I did that.

I've searched the web and I see that most @media rule examples on the web use some format like this @media all and (some other condition...), why is there media type all when it's already implied if no media type is specified? Is it perhaps some older browser compatibility issue?

I guess what I'm really asking is why is it common practice to use media type all when there is no need for it?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Igor Jerosimić
  • 13,621
  • 6
  • 44
  • 53
  • 2
    No particular reason that I can see other than that it's a common convention to include the media type in a media query. The only browser compatibility issue is that some old browsers may attempt to parse media queries as just their media types, in which case one would use `only all and ...` to stop that happening. Not in this case. – BoltClock Oct 29 '13 at 07:17

1 Answers1

4

As mentioned in the Media Queries W3C Recommendation:

‘all’ is used to indicate that the style sheet applies to all media types.

...

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

The use of the words to indicate in the first quoted sentence sound to me like all by itself can be used purely for presentational purposes.

There are a few parts where all is used for a specific purpose, however. In section 3.1 the document mentions:

Unknown media features. User agents are to represent a media query as "not all" when one of the specified media features is not known.

Unknown media feature values. As with unknown media features, user agents are to represent a media query as "not all" when one of the specified media feature values is not known.

Malformed media queries default to not all, as well.

Another example of this, as BoltClock mentioned in his comment on the question would be the use of only all. The keyword only is used to hide stylesheets from older user agents. We can test this with the following CSS:

body {
    background: red;
}

@media only all {
    body {
        background: green;
    }
}

If we open this in a modern browser, the document's body will have a green background. If we open this in an older browser (IE8, for instance), the document's body will have a red background.

JSFiddle demo.

Community
  • 1
  • 1
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 2
    `all` is also required if you're trying to negate a media query but want to apply it to all media types, e.g. `not all and (color)` would match user agents that don't have a color display regardless of whether they're print, screen, or something else. For some reason, `not (color)` is invalid. – BoltClock Oct 29 '13 at 09:00