CSS Variables - Multiple fallbacks not working

Question

According to MDN, the var function accepts multiple fallbacks. But I am unable to get them to work.

I tried the following code on Chrome, Firefox and Safari. The background-color for .demo3 is transparent on all the above browsers.

Is it an error with the code, or is it because the browsers have not implemented variable fallback?

:root {
  --my-var: red;
}

.demo1 {
  background-color: var(--my-var);
}

.demo2 {
  background-color: var(--my-background, pink);
}

.demo3 {
  background-color: var(--my-background, --my-var, pink);
}

<div class="demo1">No fallback</div>

<div class="demo2">Single fallback</div>

<div class="demo3">Multiple fallbacks</div>

alexhenkel · Accepted Answer · 2017-06-30 22:36:23Z

17

For multiple fallbacks try: background-color: var(--my-background, var(--my-var, pink));

answered Jun 30, 2017 at 22:36

alexhenkel

6124 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Variables - Multiple fallbacks not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related