Invalid at computed-value time
I rewatched Lea Verous’s talk about custom properties recently and learned something I missed the first time I watched it.
A declaration of a custom property can be invalid at computed-value time, if its value is invalid. Depending on the property’s type, this results in the property being set to
unset, so either the property’s inherited value or its initial value, depending on whether the property is inherited or not.
That’s confusing, I know; here’s an example to better understand why it’s essential to know that.
If we select a button and set its
background to an invalid value, nothing happens to the button. The browser just throws away the entire declaration.
If we do the same but now put the invalid value in a custom property instead, the button looks different because the custom property is invalid at computed-value time and falls back to
unset, which for
initial since they're not inherited properties.