Improve Compatibility with Browser Fallbacks problem

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
 
     background: var(--redcolor, red);
    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/70.0.3538.77 Safari/537.36.

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

2

The var(custom-name, value) is a function, where “custom-name” is the custom property’s name that starts with two dashes and “value” is the fallback value if the custom property is invalid. The browser may not support var(). To improve the compatibility with the browser, you use another background declaration right before the existing declaration and set its value to “red” as below:

.red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }