Improve Compatibility with Browser Fallback

HTML-CSS
1

Tell us what’s happening:

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 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

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

2

What’s your question?

3

Hey, this is quite simple.

All you have to do is assign the background element as red in red-box

Find the complete code below

<style>
  : root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

I hope you got it.

1 Like
5

Hi there!
Imagine that your page is being accessed by a browser that doesn´t support variables, so when it get to understand the class .red-box , it will find nothing to do with the background: var(--red-color); line.
But you want the background of that element to be red.

What would you do add above that line to say to the browser that you want that background to be red?

6

change your “background: red” for “background: #F00” in your code