CSS Variables inheritance and fallback

Question

My question is why CSS Variables needed to add the concept of fallback and doesn't just rely on inheritance like the other CSS properties.

For example:

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

Text 3 ends up in being red instead of green or yellow. Although there are valid properties on the level, it takes the parent color value, instead of verifying if there are other valid values on the same level. This happens when the variable name is invalid.

Apparently there is a special fallback for CSS variables so you need to use something like:

color: var(--color4, yellow);

But this means again duplication of the color, since

color: var(--color4, --color3);

does not work. Neither is:

color: var(--color3, yellow, blue);

or any other multiple values.

Also no support for keywords like inherit, currentColor, initial, etc. So I'm not sure how I could rely on the inheritance since apparently I need to be very explicit with the given values. Tested on Firefox 57.0.1 and Chrome 63.

I know the CSS variables are still as Working Draft so maybe that's why the current behavior.

BoltClock · Accepted Answer · 2018-01-03 16:42:11Z

11

As JoseAPL has stated, the reason var() expressions accept a fallback argument instead of defaulting to inheritance is simply because while custom properties do inherit, not all of the standard properties you will use them with do.

On the other hand, if you're asking why a var() expression doesn't default to the next best-cascaded value, that's because by the time the var() expression is evaluated, there are no other values to fall back to, because every other declaration in the cascade has been erased. See section 3.1, which defines the term invalid at computed-value time:

Note: The invalid at computed-value time concept exists because variables can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values.

Having said that, you can provide a custom property as a fallback value (as long as it's not the same one, for the same reason explained above) — that custom property just needs to appear in its own var() expression, since the fallback value is, well, a declaration value, not a property name.

So the result is a var() nested inside another var():

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

edited Jan 3, 2018 at 16:42

answered Jan 3, 2018 at 16:29

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

4 Comments

Ecaterina Moraru Over a year ago

Thank you for your answer. I will try to read more about "computed value time" and "used value time" to clarify the cascade values. Also thanks for stating that you need to nest the var() definition.

Ecaterina Moraru Over a year ago

Again, I would have expected that there is no limit to the fallbacks, since I don't know of other values to be limited to 2. For example font-family doesn't have this limitation.

BoltClock Over a year ago

@Ecaterina Moraru: Custom properties have a very different grammar from font-family. In fact, that's precisely what allows someone to do something like this.

Ecaterina Moraru Over a year ago

My problem came from the fact that color: var(--color3, yellow, blue); is invalid while font-family: var(--font-body, Verdana, sans-serif); works. So you need to be aware of the property you are giving a value and what it expects: value, list. It could auto truncate the string, but I guess it's safer this way. Thanks for your answer.

Jose Paredes · Accepted Answer · 2018-01-03 16:13:46Z

5

First

Not all properties in CSS are inherited, see these links so you can see which CSS properties are inherited and how inheritance is applied:

https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

Second

The order you declare duplicated properties is important.

If the color you want to be applied is green this is not the same:

// correct way to declare fallback color, it will be green and yellow if --color3 was not defined
body span {
  --color3: green;
  color: yellow;
  color: var(--color3);
}

as:

body span { // incorrect way to declare fallback color
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

The property color: var(--color4); will be taken since there is no invalid syntax on this declaration but since there is no variable declared as --color4 the inherited color will be applied (in this case from body { color: var(--color1) })

Because color is a inherited property

Third

Using the fallback with var() is another solution, but the previous one is a fallback for older browsers that don't support var()

Furthermore, you are using it wrong, the correct way to use the fallback from var() should be this:

color: var(--color4, var(--color3));

or this:

color: var(--color4, var(--color3, yellow));

var() only accepts 2 arguments, the value you want to use and the fallback.
See the syntax of how to use it in the following link

Conclusion

Since var() is not available in all browsers yet, using duplicated properties the right way is the option I would go with, or you can go with both of them.

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: yellow;
  color: var(--color4, var(--color3));
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

edited Jan 3, 2018 at 16:13

answered Jan 3, 2018 at 15:54

Jose Paredes

4,1283 gold badges29 silver badges50 bronze badges

8 Comments

BoltClock Over a year ago

This answer makes no attempt to address why var() was designed to use fallbacks instead of falling back on inheritance by default (though the fact that not all properties are inherited is a plausible, if not downright obvious, explanation).

Jose Paredes Over a year ago

@BoltClock I should have gone farther with the first one, but also I tried to clarify that the question had errors that can create misunderstanding with the concept of var, should I update my answer?

BoltClock Over a year ago

The "Third" section is also incorrect. The fallback in var() is used when the custom property is unavailable. It's not a solution for older browsers - they wouldn't see it anyway since they don't understand what var() itself means.

BoltClock Over a year ago

I think the asker understands how var() works, and in fact they've carefully crafted their CSS specifically to demonstrate their point. So there isn't much that needs to be clarified.

Jose Paredes Over a year ago

@BoltClock When I refer in the Third to but the previous one is a fallback for older browsers that don't support var() I was referring to the Second not that var() was a fallback for older browsers

|

Collectives™ on Stack Overflow

CSS Variables inheritance and fallback

2 Answers 2

4 Comments

First

Second

Third

Conclusion

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

First

Second

Third

Conclusion

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related