Custom properties affect how invalid CSS declarations are handled

I recently read Hybrid positioning with CSS variables and max() by Lea Verou and came across a CSS fact that was complete news to me.

The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.

She describes that when you're using CSS custom properties and the variables turn out to be invalid, fallback mechanisms are no longer possible. You can read more about it in the CSS spec about invalid CSS custom properties.

It includes the following example:

:root { --not-a-color: 20px; }
p { background-color: red; }
p { background-color: var(--not-a-color); }

The above CSS code won't render paragraphs with a red background color. 😲

If you want to learn more about it, Jeremy Keith was surprised by an article about this, too, and wrote about it quite nicely.

(which is why I'm not writing about it more detailed)

But... I made a little #devsheet about it. 🙈