Little Reminder About Custom Properties with Invalid Values

This is like one of those weirdly difficult quizzes about CSS. If you’ve got a <p> element sitting there in a totally normal basic HTML layout, then this CSS:

html {
  --color: blah;
}
body {
  color: blue;
}
p {
  color: green;
  color: var(--color);
}Code language: CSS (css)

What color does the <p> render as?

It’s blue. You might think it’s green, as the value blah is an invalid color. If the CSS had…

p {
  color: green;
  color: blah;
}Code language: CSS (css)

… then indeed it would be green. But CSS can’t know (in time) that the custom property is invalid, so it falls back to inheritance, which makes it blue from the body.