Stop Calling it a Media Query!

Sometimes there is confusion regarding what a media query actually is. Let's review some CSS terminology with an example.

So what part is actually the media query?

/* Isn't this a media query? Nope. */
@media
only screen and (max-width: 320px) and (min-device-pixel-ratio: 2),
only screen and (max-width: 320px) and (min-resolution: 192dpi),
only screen and (max-width: 320px) and (min-resolution: 2dppx) {
  /* some rules here */
}

The media at-keyword, @media, is followed by a comma-seperated media query list and the familiar declaration block. Each individual entry in the media query list is called, you guessed it, a media query.

UPDATE: Apparently HTML: The Living Standard now defines the media_query_list as a valid media query.

/* a media query */
only screen and (max-width: 320px) and (min-device-pixel-ratio: 2)

The media query itself usually consists of a media type (e.g. screen, print) and one or more expressions. Each expression is preceeded by the and keyword, though this is omitted for the first expression if a media type is not provided. Media types may also be preceeded by the only or not keywords.

/* an expression */
(min-device-pixel-ratio: 2)

Expressions consist of a media feature (e.g. max-width, min-device-pixel-ratio) and optional value, though most features require one. They must be enclosed by parentheses.

Media queries can also be used with @import and in HTML with the link tag using the media attribute:

@import url("iphone5.css") only screen and (max-width: 320px) and (min-device-pixel-ratio: 2);

<link rel="stylesheet" media="only screen and (max-width: 320px) and (min-device-pixel-ratio: 2)" href="iphone5.css" />

So what do we call the entire thing?

Generally, people refer to the entire construct consisting of the media at-keyword, the media query (list), and the declaration block as a media query, but statements of this type are actually known as at-rules.

So we can call this specific type of statement a few things: @media statement, or @media rule, with or without the "@" in front. The recommendation implies using at-media rule. I like just media rule when speaking. Let's stop calling it a media query, because that's just part of it. HGPA

Sources

Thanks to the LESS compiler source for prompting this.

hparra/StopCallingItAMediaQuery.md

Select an option