::backdrop doesn’t inherit from anywhere

::backdrop doesn’t inherit from anywhere

Earlier this month I was implementing a lightbox for devtoolstips.org using <dialog>. I'll be writing about that soon but you can find the implementation in that link, it's remarkable how little code you need. While styling, I made use of the CSS custom properties that where already defined in the CSS to style the dialog and it's backdrop. Or so I thought.

For some reason, the color of the backdrop wasn't what I expected, even though devtools picked up the right css var being set. It was just that the CSS var was not define. This puzzled me because it was clearly defined earlier in the CSS under the :root selector. So why couldn't devtools find it?

Turns out ::backdrop doesn't inherit from anywhere. It says so clearly in the spec:

"It does not inherit from any element and is not inherited from."

And honestly, that's pretty annoying. You'll either have to duplicate your vars in a specific declaration for ::backdrop, or add ::backdrop to your :root declaration containing all your CSS vars:

:is(:root, ::backdrop) {
    --my-var-1: #fff;
    --my-var-2: #000;
}

If you use :root only to set CSS vars this isn't that much of an issue, but since it targets the html element anyway, I usually also add my page styling straight away.

Both the ::before and ::after pseudo elements behaved like this in the past though those got updated, and I'm not sure why the same hasn't been done for ::backdrop, it seems like an oversight.

In any case, Florens came up with the idea of introducing a :globalThis in CSS, similar to globalThis in JavaScript, which just always refers to the global environment, be it window, global or something else. That would be a great solution for the use case of CSS custom properties that you just want available throughout your CSS. We can dream.

Anyway, now you know to look out for this situation.

Spread the word

Feel free to share this tweet or toot to tell other people.