CSS custom properties (variables) can be 'invalid at computed-value time' when their value is invalid. Unlike regular CSS declarations where invalid values are simply discarded, an invalid custom property causes the property to fall back to `unset` — meaning either the inherited value or the initial value depending on whether the property is inherited. This subtle difference is demonstrated with a button example: setting `border` and `background` directly to an invalid value has no effect, but routing that same invalid value through a custom property causes the button to visually change because those non-inherited properties fall back to their initial values.

1m read timeFrom matuzo.at
Post cover image