How do i improve browser compatibility by adding another background declaration right before the existing declaration and set its value to red?

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  .red-box {
    background-color: red;
  }
  :root {
    --red-color: red;
  }
  .red-box {
    
    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 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

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

2

The answer of your question is in the exercise it self :
“When your browser parses the CSS of a webpage, it ignores any properties that it doesn’t recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can’t find any other value set for that property, it will revert to the default value, which is typically not ideal.”
in this case the browser set the background to red and ignore var(–red-color).

3

You can give it a fallback valie. I think its good practice to check browser compatibility first.