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

}

Just to clarify for people finding this through Google: you *can* use CSS custom properties inside the scope of a media query, you just cannot use them in a media query declaration. — David Deprost, Jun 10 '19 at 18:42
Imagine if you changed `--mobile-breakpoint` inside of the media query's `:root`. That would be a recursive glitch I think — Seangle, Aug 05 '23 at 10:47

score 256 · Accepted Answer · answered Nov 21 '16 at 15:07

256

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.

answered Nov 21 '16 at 15:07

Oriol

274,082
63
437
513

215

The answer is correct in that the spec doesn't currently handle CSS variables in media queries, but incorrect in that is not what CSS variables are trying to accomplish. **Reducing repetition and magic numbers is exactly why CSS variables were created** -- see https://www.w3.org/TR/css-variables-1/#intro – mikemaccana Jul 25 '18 at 09:45
28

BTW how is this *NOT* a property value ?? It's `max-width`'s property value! It should totally work! – user9645 Dec 09 '20 at 14:24
11

@user9645 Actually, no. It may _look_ like the `max-width` property because you write the same text, but it accomplishes something completely different. A CSS property declaration acts as a "setter", it sets a value for an element, while the `max-width` in a media query is a "getter": it requests the current width of something (and then compares it to the value provided). The text `max-width: 1000px` as a media query is (in the form of some NON-VALID pseudocode) something like `viewport.getWidth() <= 1000px`, while as a property declaration it would be `element.setMaxWidth(1000px)`. – Taederias May 29 '21 at 14:44
any updates for 2023? – eastwater Jul 22 '23 at 03:57

jschoi · Answer 2 · 2022-01-16T19:17:56.000

As Oriol has answered, CSS Variables Level 1’s var() cannot currently be used in media queries. However, there have been recent developments that will address this problem. 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.

The CSS Working Group (CSSWG) codified env() in a new standard (currently at a draft stage): the CSS Environment Variables Module Level 1 (see this GitHub comment and this comment for more info). 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 do so in issue #2627, in issue #3578, or in any CSS GitHub issue labeled with “css-env-1”.

GitHub issue #2627 and GitHub issue #3578 are devoted to custom environmental variables in media queries.

Original answer from 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”).

score 114 · Answer 3 · edited Aug 16 '21 at 19:47

114

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 limitation: if you need to access the value as a variable – for example to use in calculations elsewhere – you will need to have a variable, and it requires defining the variable in two places: the media query and variable declaration.

edited Aug 16 '21 at 19:47

Aryan Beezadhur

4,503
4
21
42

answered Jan 26 '19 at 04:42

Sean

1,272
1
8
5

I'm not entirely sure what you suggest? this means no support right? – windmaomao Jun 12 '23 at 15:50

Cohars · Answer 4 · 2021-12-13T18:12:07.690

32

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

edited Dec 13 '21 at 18:12

answered Nov 21 '16 at 14:57

Cohars

3,822
1
29
50

I don't understand the meaning of "change your variables in the media-query", you can show example? – Nov 21 '16 at 15:00
7

Yes, just did, it's in the article I linked. I know it's not what you expected, but CSS variables **just can't be used to define the media queries** – Cohars Nov 21 '16 at 15:02
This is important. Imagine using the custom property's value in the @media rule - and then also wanting to change the value of that custom property - at that same break-point. it's weird... but they are custom properties - and not just variables. So, - it seems like the reason it wasn't created that way - is better explained with an example than the spec. A combo would be best. – sheriffderek Aug 31 '21 at 23:22

score 19 · Answer 5 · answered Aug 13 '21 at 22:25

The level 5 specification of media queries define Custom Media Queries that does almost what you are looking for. It allows you to define breakpoint similar to how you do with CSS variables and later use them in different places.

Example from the specification:

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

There is still no support for this actually so we have to wait before using this feature.

score 18 · Answer 6 · edited Aug 08 '21 at 17:46

18

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

edited Aug 08 '21 at 17:46

stefan judis

3,416
14
22

answered Nov 21 '16 at 15:09

pradeep1991singh

8,185
4
21
31

et. al : With postcss you can also use cssnext http://cssnext.io/features/#custom-media-queries – sebilasse Apr 13 '18 at 10:55
1

@sebilasse: [custom-media-queries](https://github.com/postcss/postcss-custom-media) does not address the main problem of not being able to use css variables as breakpoints for media queries – zhirzh Sep 16 '18 at 09:47

score 8 · Answer 7 · answered May 10 '20 at 16:43

Short Answer

You can use JavaScript to change the value of media queries and set it to the value of a css variable.

// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'

// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];

// update media rule
mediaRule.media.mediaText = '..'

Long Answer

I wrote a small script which you can include on your page. It replaces every media rule with a value of 1px with the value of the css variable --replace-media-1px, rules with value 2px with --replace-media-2px and so on. This works for the media queries with, min-width, max-width, height, min-height and max-height even when they are connected using and.

JavaScript:

function* visitCssRule(cssRule) {
    // visit imported stylesheet
    if (cssRule.type == cssRule.IMPORT_RULE)
        yield* visitStyleSheet(cssRule.styleSheet);

    // yield media rule
    if (cssRule.type == cssRule.MEDIA_RULE)
        yield cssRule;
}

function* visitStyleSheet(styleSheet) {
    try {
        // visit every rule in the stylesheet
        var cssRules = styleSheet.cssRules;
        for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
            yield* visitCssRule(cssRule);
    } catch (ignored) {}
}

function* findAllMediaRules() {
    // visit all stylesheets
    var styleSheets = document.styleSheets;
    for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
        yield* visitStyleSheet(styleSheet);
}

// collect all media rules
const mediaRules = Array.from(findAllMediaRules());

// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
    replacements.push(value);

// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
    for (var k = 0; k < replacements.length; k++) {
        var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
        var replacement = '($1: ' + replacements[k] + ')';
        mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
    }
}

CSS:

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

  --replace-media-1px: var(--mobile-breakpoint);
  --replace-media-2px: ...;
}

@media (max-width: 1px) { /* replaced by 642px */
  ...
}

@media (max-width: 2px) {
  ...
}

score 3 · Answer 8 · answered Aug 15 '21 at 04:38

You can build a media query programmatically using matchMedia:

const mobile_breakpoint = "642px";
const media_query = window.matchMedia(`(max-width: ${mobile_breakpoint})`);
function toggle_mobile (e) {
  if (e.matches) {
    document.body.classList.add("mobile");
  } else {
    document.body.classList.remove("mobile");
  }
}
// call the function immediately to set the initial value:
toggle_mobile(media_query);
// watch for changes to update the value:
media_query.addEventListener("change", toggle_mobile);

Then, instead of using a media query in your CSS file, apply the desired rules when body has the mobile class:

.my-div {
  /* large screen rules */
}

.mobile .my-div {
  /* mobile screen rules */
}

score 2 · Answer 9 · answered Dec 15 '18 at 14:19

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)

score 0 · Answer 10 · answered Aug 25 '23 at 11:33

This is not exactly an answer to using variables in media queries, but it tackles the problem of having to specify the width multiple times in components

My solution uses container queries in combination with media queries and exploits the possibility to have named containers.

First we need to define the breakpoints

@media (min-width: 399px) {
  body {
    container-type: inline-size;
    container-name: xsmall;
  }
}

@media (min-width: 1079px) {
  body {
    container-type: inline-size;
    container-name: xsmall small;
  }
}

@media (min-width: 1439px) {
  body {
    container-type: inline-size;
    container-name: xsmall small medium;
  }
}

@media (min-width: 1999px) {
  body {
    container-type: inline-size;
    container-name: xsmall small medium desktop;
  }
}

Here we use the possibility to define multiple container names on elements. Using the mobile first approach and adding styles as we go up in screen size.

Now if we want to make some changes to a element in the small screen size and up I can add this style definition

@container small (min-width: 0) {
  ... some css
}

IMO the only thing that makes this look hacky is that the container query need to have a predicate, so the (min-width:0) is needed to make it work.

With this approach we can specify screen breakpoints in a single place and and remove all absolute screen sizes queries from components.

CSS native variables not working in media queries

10 Answers10

Short Answer

Long Answer

Linked

Related