Improve Compatibility with Browser Fallbacks help me in this task

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

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

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

Not all browsers support css3 variables and since css is parsed from top to bottom, only the first background style will apply in case the browser fails to utilize css variables.

3

thanks a lot, i will try this code right now

4

You need to also remove the extra var usage

.red-box {
  background: red;
  background: var(--red-color,red); /* Remove this line */
  background: var(--red-color);
  height: 200px;
  width:200px;
}