Improve Compatibility with Browser Fallbacksbb

HTML-CSS
1

Tell us what’s happening:
I dont know what to do. helpppp
what should i be doing. what am i doing wrong

*Your code so far

johjiojo[i'k
<style>
  :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 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

You will have to give this class property of background with value red.
And the reason for that is explained in the challenge as follows:

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.

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. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.

Does this help?

3

Hello,
so how would i be able to do that . i dont know how to do that. thank you