Custom properties affect how invalid CSS declarations are handled
- Published at
- Updated at
- Reading time
- 1min
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. 🙈
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 24 days ago.