Improve Compatibility with Browser Fallbacks 4

HTML-CSS
1

Tell us what’s happening:
I am so confused as to what to do on this one. I have tried looking for a video of it on Scrimba, but can’t find any video at all right now.

Your code so far


<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/71.0.3578.98 Safari/537.36.

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

2 
.red-box {
    // your fallback background

    // background using variable 
    background: var(--red-color);
    height: 200px;
    width:200px;
  }

Just set the fallback background property above the current background. If the browser doesn’t support variable then this background will work; otherwise, this background will be overwritten by the next background.

3

Capture53
Capture53510×624 32 KB

What am I doing wrong here? I’m so confused.

4

I was stuck as to how to declare the fallback backgorund, but it seems you do it this way:

.red-box {
background: red; <-- this being the fallback
background: var(–red-color);
…
}

5

Thank you so much! I was stuck on that one until you just helped me out :slight_smile:

6

It doesnt work for me

7

What’s your current code?