Improve Compatibility with Browser Fallbacks where is the fault

HTML-CSS
1

Tell us what’s happening:

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

2

@raskinfe Here’s the part in the instructions that mentions this:

This means that if you do want to provide a browser fallback, it’s as easy as providing another more widely supported value immediately before your declaration.

The immediately before your declaration in this case means add the more widely supported value to the previous line. So, you added:

background: var(--red-color, red);

Assuming not all browsers understand CSS variables (the var() part), how can you change this to make the background red so all browsers will understand it?