I do not understand Fallbacks

Tell us what’s happening:

Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

Your code so far


<style>
:root {
  --red-color: red;
}
.red-box {

  background:var(--red-color,red);
  height: 200px;
  width:200px;
}
</style>
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

Older browsers will not understand a line of CSS that contains var(...) so they will ignore that line completely. In order to accommodate those browsers, you need two declarations. When there are multiple rules that a browser understands, it will take the last one, so we want the fallback to be before the preferred declaration. The "existing background declaration is the one that was already there in the challenge code:

    background: var(--red-color);

“immediately before” means on the blank line above it.