Invalid custom properties for background-color do not cascade

August 10, 2020 , I learned...

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.

Source / Specification