Improve Compatibility with Browser Fallbacks?

I don’t get what I did wrong with setting the declaration?? The bolded part “red” in the variable is what I added…

My code so far


<style>
  :root {
    --red-color: 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 (Macintosh; Intel Mac OS X 10_11_6) 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

This is not what is being asked to do.

This background is for new browsers and it works great. So you do not have to change it.

What is being asked is to create another background, set to red.

And here is what happens:

Let’s say someone has an old browser, visits your website.
His browser will start reading the CSS from top to bottom,
It will find the background for new browsers, and
Problem! it cannot read it and it doesn’t understand it.

The solution: the old browser needs a language that it understands
and what we know is that it does understand the old style of declaring CSS.

Which means that a new background property should be added and set to red.

1 Like

dont get it, below is my answer it doesn’t work…

:root { --red-color: red; } .red-box { background: var(–red-color, red); height: 200px; width:200px; }

Hi there.
The response to this thread from Clevious (directly above you) is a great answer to the task and why the challenge is asking for such an answer, I hope reading it provides some understanding!

1 Like

The why ia needes is clear, but why is her exercise wrong?

I’m having the same issue, cant figure the right way of doing it

I just got it

:root { --red-color: red; } .red-box { ** background: red;** background: var(--red-color); height: 200px; width:200px; }
1 Like