This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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 blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-04-18T00:00:00+00:00) Invalid at computed-value time. Retrieved from https://www.scien.cx/2023/04/18/invalid-at-computed-value-time-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.