Published at
Updated at
Reading time
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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 11 days ago.
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