What's a @Media Rule Without a Media Type Do

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 in media queries used?

This specification from W3C suggest that media queries could also be used for HTML, XHTML, XML. Perhaps, queries with speech media type were mainly used for importing text to speech software into varieties of document types.

This is the only source that I could find describing the speech media type But it does not really provide a great example of how it is used.

As for why the examples often used screen media type, simply because it is the most often used. Previous versions of media queries had many media types, but are now removed as they have few uses or serve the same purpose with the current media types.

In the future, they may alter their specification, removing those not very useful media types or adding more of it to suit future technologies.

Update: I found a GitHub thread discussing about speech media type. It basically says that speech is mainly for user agent that deals with speech. E.g. Siri or Alexa.

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.

Why does `not (some-width: Xem)` media query never fire?

When Media Queries was first introduced, it required the not keyword to be followed by a media type in order for the media query to be valid. It seems strange, but that's just how the grammar was defined (see the media_query production).

This is now fixed in Media Queries level 4 (see the <media_not> production), so what you have should work as expected in browsers that conform to MQ4. However, none of the browsers that have begun shipping level 4 media features has implemented the new grammar yet.

In the meantime, you'll need to add a media type. If the media type is not important, use all:

not all and (max-device-width: X)

Updated fiddle

What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.

Since you're new, let's break down your media query to two parts:

@media only screen

This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.

and (min-device-width: 320px) and (max-device-width: 480px)

This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.

Can I use @media in an if/else kind of way?

There's no if/else syntax for @media, so you would need to repeat the same media query in two separate @media rules and use not for one of them to mean "else".

In your case, the media query would be all and (min-width: 270px). (You need to have a media type for not to work; the default is all so I'm just using that.)

Your CSS would then look like this:

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
    /* Apply second set of CSS rules */
}

---

I should add that one popular way is to make use of the cascade by having just one @media rule for overriding styles:

/* Apply second set of CSS rules */

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

However this falls short if you have any styles outside the @media rule that aren't (or cannot be) overridden inside it. Those styles would continue to apply, and you have no way of undoing them short of actually redeclaring them. Sometimes you cannot undo them by redeclaring them, and that's when you cannot use this method to apply styles. See my answer to this question for a detailed explanation.

In this example, the height: 200px declaration will always apply:

.example {
    width: 200px;
    height: 200px;
}

@media all and (min-width: 270px) {
    .example {
        width: 400px;
    }
}

Of course, if that's not a problem then you can use this in order to avoid duplicating media queries. But if you're looking for a strict if/else construct, then you'll have to use not and a duplicated media query.

What does the 'only screen' code mean in a css media query?

From https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

only: The only keyword prevents older browsers that do not support
media queries with media features from applying the specified styles.
It has no effect on modern browsers.

The screen keyword references that it's a computer, mobile phone or tablet etc. There are two other media types, print and speech, as well as the default all.

Simply: The only keyword is optional and used for backwards compatibility. The screen keyword will default to all.

Is it possible to do a CSS @supports check on a @media rule?

This does not seem to work. Should it work?

No; @supports only supports property declarations, not at-rules or indeed any other grammatical construct in CSS. You're not looking to check for support for the @media rule anyway; you're trying to check for support for specific media features. But @supports doesn't support that either, even though media features share the same declaration syntax with property declarations.

To that end, you don't need the @supports rule at all. To check if a browser supports a certain media feature, simply write a @media rule with a media query list containing both the media feature and its negation:

@media not all and (pointer), (pointer) {

  p { color: green; }

}

<p>If this text is green, your browser supports the <code>pointer</code> media feature.

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.

---

Related Topics