Invalid at computed-value time

posted on 18.04.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);
}