996392 - CSS variable not work in media query

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[[e-mail]]

I'd like to use CSS variable to define some breakpoints for responsive design.


have a css media query with variable

```
:root {
  var-red: #F00;
  var-green: #0F0;
  var-large: 800px;
}

body {
	background: var(green);
}

@media screen and (max-width: var(large)) {
  body {
	background: var(red);
  }
}
```

actual:

The page always green since @media query not functional with CSS variable.

expect: var(large) in @media works

Comment 1

[Cameron McCormack (:heycam)]

Hi Fred, two things.  First, you can't use CSS Variables inside media query expressions.  The media queries spec would need to be updated to allow that somehow -- for example by defining that variables are resolved against the root.  I think that could be a useful thing; I'll mail www-style about it.  Second, the syntax for CSS Variables changed recently in bug 985838 due to a spec change.  You would now write the first bit of the style sheet like this now:

:root {
  --red: #F00;
  --green: #0F0;
  --large: 800px;
}

body {
  background: var(--green);
}

Comment 2

[Cameron McCormack (:heycam)]

http://lists.w3.org/Archives/Public/www-style/2014Apr/0138.html

Comment 3

[Boris Zbarsky [:bzbarsky]]

As I asked in that thread what happens with:

@media screen and (max-width: var(--large)) {
  :root {
	--large: 200px;
  }
}

?

Comment 4

[Cameron McCormack (:heycam)]

Good question. :(

Comment 5

[[e-mail]]

I've awared the syntax change part. Thanks for the information.

Does there anywhere to get more information about where can I or cannot use CSS variable?
Since it's a bit confused that if I can't use CSS variable somewhere in a CSS file.

Comment 6

[Cameron McCormack (:heycam)]

I'm not sure if there is any concise documentation about where you can use variables.  But currently in Gecko you can only use them in two places: (1) in regular property declarations (and DOM APIs that set property values), regardless of whether they are inside an at-rule; and (2) in @supports conditions, but here it is really just testing whether variables are supported at all, as it doesn't substitute a particular value for the variable but just tests whether the property value parses correctly with the variable references in there.

Comment 7

[[e-mail]]

Thanks it's clear :)