On August 10, 2020, I learned...
Invalid custom properties for background-color do not cascade
I learned this today after reading Chris’ write-up in this week’s CSS-Tricks newsletter. It comes by way of Jeremy Keith who tested how the cascade handles invalid custom properties by placing three paragraphs on page with different background declarations:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
:root {
--test: green;
}
p {
background-color: red;
}
p + p {
background-color: var(--test);
}
p + p + p {
--test: nonsense;
}
The backgrounds for the first two paragraphs are obvious. But the third one? We might expect it to resolve to var(--test)
since that is the nearest sibling selector but — nay! — it resolves to unset
instead. That’s because an invalid background-color
value resolves to the default value which, in this case, is unset
or transparent.