0

While trying to use custom properties in a more complex context... I came accross a problem which I have simplified here:

If I declare a chain of custom properties which refer to eachother in :root, and then in another selector I try to redefine one of the earlier custom property values... it simply doesn't work unless I duplicate all subsequent declarations in the chain.

Example:

<style>
:root{
  --grandpa: pink;
  --father: var(--grandpa);
  --son: var(--father)
}

.container{
  display:flex;
  text-align:center;
}

.container > div{
  width:50%;
  min-height:100%;
  padding:3rem;
}

.fail{
  --grandpa: lightgreen;
  background-color: var(--son);
}

.pass{
  --grandpa: lightgreen;
  --father: var(--grandpa);
  --son: var(--father)
  background-color: var(--son);
}
</style>
<div class="container">
  <div class="fail">fail</div>
  <div class="pass">pass</div>
</div>

Here the class named 'fail' has '--grandpa' declared as 'lightgreen', which should mean both '--father' and '--son' are 'lightgreen' too (if the previously declared relationships remain true) and yet it is rendered in the browser as pink.

It works under the class named 'pass' because all the subsequent links in the chain have been included. But this seems really inefficient.

I presumed the browser simply isn't able to jump around the CSS file to remember the relationships which were previously defined, but interestingly, inspecting with Dev Tools in firefox, the '--grandpa; custom property in ':root' is actually crossed out, indicating the behaviour I had expected, even though it is clearly still what is being rendered. Chrome shows similar behaviour.

Is there any way I can work around this without duplicating lines of code which should have been inherited?

Many thanks.

(I wasn't able to find much to explain this in the CSS spec here: https://www.w3.org/TR/css-variables-1)

jacobupal
  • 1

0 Answers0