Need help with Browser Fallbacks

HTML-CSS
1

Tell us what’s happening:
I am not understanding how to do a proper fallback for color. I know it must be something simple but everything I tried hasn’t worked. I even looked at the previous code camp lesson to hopefully help me with this current one, no luck. If anyone can help me figure this out that would be very kind.

Your code so far


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

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

2

Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

3

What is the “existing background declaration” they said that in the lesson but it didn’t understand what they were referring to.

4

Look at your .red-box rule. Is there a background property? Then look at the task again.

Your .red-box rule should include a fallback

Meaning you should have another option for browsers that can’t parse variables.

5

Is this what it is referring to?

background: var(–red-color, red);
or
background: var(red, --red-color);

6 
  .red-box {
    
    background: var(--red-color);

This is your existing one. There’s a reason they left space right above it :wink:

7

Thank you. I got it they wanted me to create another.

background: red;
above
background: var(–red-color);

thank you so much :rofl: