2

In css the var() with fallback, the fallback should be ignored if the --var exists. But i tried set the --var with initial value then causing the --var no longer exists, so the fallback will be used.

I tested on chrome & firefox, resulting the same.

Is that a bug in css or it just an exception rule of fallback? I didn't see on doc in https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values

.test1 {
  color: var( --not-existing, red);
}

.test2 {
  --my-color: blue;
  color: var( --my-color, red);
}

.test3 {
  --my-color: initial;
  color: var( --my-color, red);
}

.test4 {
  color: initial;
}
<p class="test1">
  I should be red
</p>

<p class="test2">
  I should be blue
</p>


<p class="test3">
  I should be initial color (not working)
</p>

<p class="test4">
  I should be initial color (works)
</p>

See my sandbox: https://codesandbox.io/s/html-css-forked-312oj?file=/index.html

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Heyyy Marco
  • 633
  • 1
  • 12
  • 22
  • 1
    this is indeed a feature of CSS variables and a useful one in case you want to re-use the fallback or simply unset the variables – Temani Afif Apr 07 '21 at 14:46
  • @TemaniAfif Please add reference to your bold statement. – connexo Apr 07 '21 at 14:46
  • @connexo check the duplicates, I am referencing the specification – Temani Afif Apr 07 '21 at 14:47
  • @TemaniAfif As cited, the spec clearly states *with the same meaning as in any another property*. So how can this part of the spec be correct if the algorithms are designed to work differently? – connexo Apr 07 '21 at 14:51
  • 1
    @connexo both Spec are correct. initial *apply* to the custom property and is not stored inside the custom property. Same logic with inherit (related: https://stackoverflow.com/a/53214440/8620333) – Temani Afif Apr 07 '21 at 14:54

0 Answers0