CODEWITHSUNDEEP
cssmedia-queries
Igor Jerosimić
Igor Jerosimić

Reputation: 13741

Why use media query type "all" when it's implied?

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?

Upvotes: 2

Views: 716

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

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.

Upvotes: 4

Related Questions