CSS native variables not working in media queries

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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.

Solution 4 - Css

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

Solution 5 - Css

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

Solution 6 - Css

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.

Solution 7 - Css

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

Solution 8 - Css

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)

Solution 9 - Css

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 */
}

Content Type	Original Author	Original Content on Stackoverflow
Question	user7122183	View Question on Stackoverflow
Solution 1 - Css	Oriol	View Answer on Stackoverflow
Solution 2 - Css	jschoi	View Answer on Stackoverflow
Solution 3 - Css	Sean	View Answer on Stackoverflow
Solution 4 - Css	Cohars	View Answer on Stackoverflow
Solution 5 - Css	pradeep1991singh	View Answer on Stackoverflow
Solution 6 - Css	Temani Afif	View Answer on Stackoverflow
Solution 7 - Css	Ich_73	View Answer on Stackoverflow
Solution 8 - Css	The Vojtisek	View Answer on Stackoverflow
Solution 9 - Css	grandinero	View Answer on Stackoverflow