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