Improve Compatibility with Browser Fallbacks anyone

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: 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.102 Safari/537.36.

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

2

the browser fallback task requires you to use both the variable --red-color: red; and the css declaration background: red;

The reason being is that not all browsers support CSS variables, so to ensure an element still has the styling set in the instance that CSS variables are not supported, we need a declaration to fall back on in this case it is background: red;

Hope this helps