Initial value of custom properties (at rule)

[00120260a]

Hi,
I’m trying to understand how custom properties work, and I feel like I’m not making a mistake. I want to use the new CSS variables to their full potential, that is to say as real custom properties. I try to take advantage of their heritage and initial value in particular.

Let’s say I have:

@property --logo-color {
   syntax: "<color>";
   inherits: true;
   initial-value: red;
}
.green {
--logo-color: green;
color: var(--logo-color);
}
.green .red {--logo-color: initial}

I know that “color:initial” is not at all what I want, because the default value of the property comes from the browser’s default stylesheet, which no one gives a damn about. But I thought that setting “–logo-color: initial” would have the effect of returning to the initial value that was part of the definition. Otherwise, I wouldn’t see any point in it! With this code above, and let’s say

<ul class="green">
<li><p>green</p></li>
<li><p>green</p>
       <p class="red">red</p>
</li>
</ul>

Nothing happens, everything stays green.
No matter what value I redefine the variable to, the change does not take place, even if the developer tool takes note of the new value. No change to “color”.
Is this a bug? Firefox and Chromium have the same behavior though.
Thanks for your help

[bappyasif]

check this article, seems like its talking about how to use custom properties, happy reading Using @property for loosely typed CSS custom properties - LogRocket Blog

[00120260a]

Thanks. I found the explanation: I was right, the value is locked.

The problem, as best I understand it, is that --bg was never declared on either of the divs. It can use --bg, because it was declared higher up, but by the time it is being used there, the value of it is locked. Just because you change some other property that --bg happens to use at the time it was declared, it doesn’t mean that property goes out searching for places it was used and updating everything that’s used it as a dependency.

Nonsensical…

[lasjorg]

I might be reading this wrong, but I believe it is because the Initial value of custom properties is the guaranteed-invalid value.

2. Defining Custom Properties: the --* family of properties

So when set to initial it will fall back to its @property initial-value or the inherited value, not the browser default value.

@00120260a

Thanks. I found the explanation: I was right, the value is locked.

Not sure where you got that explanation from or what locked means. If you set the property to a color instead of initial the .red would be that color (not .green because of scoping in the other selector I believe).

[anon42932716]

Hello @00120260a !

If I am understanding you correctly, you are explaining that the use of --bg is part of another defined attribute allowing its use , but it has never been declared on its own.

Therefore, when we attempt to use it by itself as an attribute on its own, we receive the error message “–bg” is not defined.

Is this the correct understanding of what you mean by locked?

[lasjorg]

It is a code explanation for code we haven’t seen. So I don’t think we can say much about how it relates to the code posted in the initial post.

[lasjorg]

To expand on my answer.

The initial value of a custom property is not related to the values you assign them. It doesn’t become a color type just because you gave it a color value. It is still a custom property and it has its own initial value which is unrelated to the values you assign to it.

The initial value for custom properties is the “guaranteed-invalid value”. So setting it to initial invalidates its value and it will fall back to the initial-value, or an inherited value, or a fallback value (in the var()).

At least, that is my understanding as best as I can tell.