CSS native variables not working in media queries

我怕爱的太早我们不能终老 提交于 2019-11-28 04:26:53

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.

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]”.


Update 2019-07-06: Work continues on the specifications. GitHub issue #2627 is devoted to custom environmental variables.

What you CAN do however is @media query your :root statement!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

Totally works in Chrome, Firefox and Edge at least the latest production versions as of this posting.

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

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) {}

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;
  }
}

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)
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!