0

I believe the first two examples should have a green background and I believe the last example should fail because supplying another var() function as the first parameter is not defined behavior in the docs https://www.w3.org/TR/css-variables/#cycles

.test1 {
  --c1: green;
}
.test2 {
  --c1: var(--c1,red);
  background-color: var(--c1,pink);
}

.test3 {
  --c2: green;
}
.test4 {
  background-color: var(--c2,pink);
}

.test5 {
  --c3: green;
}
.test6 {
  --c3: var(var(--c3),red);
  background-color: var(--c3,pink);
}
<div class="test1">
  <div class="test2">
    12
  </div>
</div>

<div class="test3">
  <div class="test4">
    34
  </div>
</div>

<div class="test5">
  <div class="test6">
    56
  </div>
</div>

Question 1: Why is example "12" not working?

Question 2: Why is example "56" working and should it be?

Improve this question
3
  • duplicate of the first question: stackoverflow.com/q/51660196/8620333 Commented Apr 16, 2019 at 21:58
  • Thank you, I didn't find that question. It is indeed a duplicate. Should I delete this? Commented Apr 16, 2019 at 22:04
  • no it can also be useful, we still have few questions around CSS variable so having many similar ones written differently can be helpful to bring search result Commented Apr 16, 2019 at 22:06

1 Answer 1

Reset to default
0

After closely inspecting the developer tools and how the rules are evaluated I've decided to answer my own question.

Example "12" is not working because when you declare --c1: var(--c1,red); it immediately overrules its old value due to cascading rules, so the internal reference to --c1 refers to the same line and generates a cycle, and the documentation states that:

If there is a cycle in the dependency graph, all the custom properties in the cycle must compute to their initial value (which is a guaranteed-invalid value).

Example "56" appears to be working but it is not actually working, rule --c3: var(var(--c3),red); is completely invalid and is ignored, therefore example "56" acts identically to example "34".

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

1 Comment

still curious about CSS variables I see ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.