Invalid at computed-value time
source link: https://www.matuzo.at/blog/2023/invalid-custom-properties/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Invalid at computed-value time
posted on April 18., 2023
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 border and background to an invalid value, nothing happens to the button. The browser just throws away the entire declaration.
button {
border: bla;
background: bla;
}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 background and border means initial since they're not inherited properties.
button {
--bla: bla;
border: var(--bla);
background: var(--bla);
}My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK