CSS native variables not working in media queries

Question

I am trying to use CSS variables in media query and it does not work.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Answer 1

Apparently it's just not possible to use native CSS variables like that. It's one of the limitations.

A clever way to use it is to change your variables in the media-query, to impact all your style. I recommend this article.

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

Answer 2

One way to achieve what you want is using npm package postcss-media-variables.

If you are fine with using npm packages then you can take a look documentatoin for same here

• postcss-media-variables

Example

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

Answer 3

As you can read other answers, still not possible to do so.

Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:

• weak browser support
• so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)

Answer 4

As Oriol has answered, currently, CSS Variables Level 1’s var() cannot be used in media queries. However, there have been recent developments that will address this problem. In a few years, once CSS Environment Variables Module Level 1 is standardized and implemented, we’ll be able to use env() variables in media queries in all modern browsers.

If you read the specification and have a concern, or if you want to voice your support for the media-query use case, you can still do so in GitHub w3c/csswg-drafts#1693 or in any CSS GitHub issue prefixed with “[css-env-1]”.

---

Original answer 2017-11-09: Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.

You can subscribe to updates on this matter in w3c/csswg-drafts GitHub issue #1693. (For especially relevant historical details, expand the meeting logs embedded in the CSSWG Meeting Bot’s resolutions and search for “MQ”, which stands for “media queries”.)

I plan to update this question in the future when more developments occur. The future is exciting.

---

Update 2018-02-08: Safari Technology Preview 49 has added support for parsing calc() in media queries, which may be a prelude to supporting env() in them as well.

---

Update 2018-04-27: The Chromium team at Google has decided to start working on env(). In response, Atkins has started to specify env() in a separate, unofficial draft standard: the CSS Environment Variables Module Level 1. (See his GitHub comment in w3c/csswg-drafts#1693 and his comment in w3c/csswg-drafts#1817.) The draft calls out variables in media queries as an explicit use case:

Because environment variables don’t depend on the value of anything drawn from a particular element, they can be used in places where there is no obvious element to draw from, such as in @media rules, where the var() function would not be valid.

If you read the specification and have a concern, or if you want to voice your support for the media-query use case, you can still do so in GitHub w3c/csswg-drafts#1693 or in any CSS GitHub issue prefixed with “[css-env-1]”.

Answer 5

From the spec,

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

So no, you can't use it in a media query.

And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can't work.

This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.