Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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. 🙈

Video explanation of invalid custom properties.

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles