Why Use Media Query Type "All" When It's Implied

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

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.

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

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.

What is the benefit of using 'all' in a media query?

There is no benefit. According to MDN:

Unless you use the not or only operators, the media type is optional
and the all type will be implied.

The all type is implied, so @media (min-width: 500px) is interpreted as @media all and (min-width: 500px) and the two statements are equivalent. The latter is just needlessly specific.

Does 'all' add anything to a media query?

Yes it does and by default it's set to all.

All devices listen to this

Available media types:

• all: All devices listen to this
• braille: Used for braille tactile feedback devices.
• embossed Used for paged braille printers.
• handheld Used for handheld devices (Smartphones and tablets do NOT
  listen to this!).
• print Used for paged material and for documents viewed on screen in
  print preview mode.
• projection Used for projected presentations, for example projectors.
• screen Used primarily for color computer screens and smartphones.
• speech Used for speech synthesizers.. (Whatever that may be)
• tty Used for media using a fixed-pitch character grid (such as
  teletypes, terminals, or portable devices with limited display
  capabilities).
• tv Used for television-type devices (low resolution, color,
  limited-scrollability screens, sound available).

Reference: http://cssmediaqueries.com/what-are-css-media-queries.html

Should I always add `screen` to `@media` query? Everything appears to work with or without `screen` condition

For 99.9% of cases out there, screen is all that's ever used to view your site, so could be left out - when not specified, all is implied. However, there are other possibilities out there.

Think visually impaired users, for example. Some visually impaired web surfers use screen readers, which do not visit your site as screen. There are also tactile web browsers that present information from sites as Braille. Again, not a screen.

As mentioned before, these are certainly anomalous users; however, depending on the traffic you expect on your site, it's encouraged as best practice to include the screen in your @media queries when designing for a screen display.

Other media options are:

• braille
• embossed
• handheld
• print
• projection
• speech
• tty
• tv

Update (June 2017)

As of Media Queries 4, much of this was simplified—all but a few of the above are deprecated. Currently supported are the following:

• all
• print
• screen
• speech

See the @media page on the Mozilla Developer Network for details, and thanks to @romellem for pointing out these changes!

What's a @media rule without a media type do?

If the media type is not explicitly given it is all. ~ W3C Media Queries

In other words, an @media rule without a media type is shorthand syntax, where all is implied.

More from the spec:

2. Media
Queries

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.

EXAMPLE 5

I.e. these are identical:

@media all and (min-width: 500px) { ... } 
@media (min-width: 500px) { ... }

As are these:

@media (orientation: portrait) { ... }
@media all and (orientation: portrait) { ... }

...

EXAMPLE 7

I.e. these are equivalent:

@media all { ... }
@media { ... }

_{source: https://www.w3.org/TR/css3-mediaqueries/#media0}

Why are media types expected to deprecate?

The basic idea is that "print" may be too broad-brush. If we think about the characteristics of "print" versus "screen" we note that there are typically differences in (i) paged vs continuous media;(ii) DPI; (iii) color space; etc. So these could each be media features instead. Taking color space of printers for instance, toner behaves differently to ink, so you might want different CSS for each. And color space can also differ between screens, so when choosing your CSS for each color space, the distinction between print and screen is not necessarily a useful one compared to directly targeting the color space.

"it's expected to deprecate in time" means that this represents the current thinking of the spec writers. There's likely a significant amount of research still to be done to identify all the characteristics of print and screen media sufficiently to define the media features that would adequately replace the media types and allow them to be deprecated. Nor is it yet wholly clear that it will ever be the case, though the spec writers think it will. Finally, spec writers change their minds over time. It might yet come to pass that media types will continue to have a role to play in the future.

Media query doesn't work at all

Have you tried with @media all and (min-width:600px){? That usually fixed it for me.

If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width, and smaller if you have max-width).

    #bigfont
{
    font-size: 80px !important;
    line-height: 79px !important;
    font-family: dosis, sans-serif !important;
    font-weight: 300 !important;
}

Why is @media all screen visibility:hidden not working, while @media only screen does work?

@media all screen {} is syntactically invalid.

@media all, screen {} is valid. (The screen in there is redundant.)

@media only screen {} is valid and could be even alternatively written as @media screen {}

It's because only (and not) are logical operators you put before media query and separate it with space. only is implied, when used explicitly it must be followed by a media type.

(There is and operator for refining media query and , (comma) operator for separating media queries.)

all and screen are media types. all is implied when not used explicitly. Media query can be refined by media features chained with and joiner. Multiple media queries are separated with commas.

/* these should be more or less equivalent: */
@media all {}
@media only all {}
@media screen, print, speech {}
@media only screen, only print, only speech {}
@media not some_unknown_media_type {}
@media only all and (min-width: 0) {}
@media not some_unknown_media_type and (min-width: 0) {}

(Currently it is not possible to use not for media feature, only for explicit media type. Then it negates only that media type, not entire refined query.)

---

Related Topics