How to complete this step (what does it mean)

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

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

could you please add the Tell us what's happening paragraph? without that we don’t know what the issue is, what you understand or not understand, how we can help you

wait i will send the link

the link to the challenge is already there, what’s your difficulty with this we don’t know

I didn’t understand what does it means

everything in the challenge instructions? or what part you don’t understand?

I am beginner and while practicing i stucked there. so , i need little help how to pass this step

can u please solve this problem .

It looks like a variable is being used to set the background color of the .red-box class. Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red. (What programm requested to do, I am unclear)

You need to write
background: red;
just before the line
background: var(–red-color);
This is called a “browser fallback” - What this does is that, in case the browser does not support CSS variables, (like IE), it will read the first line (the one you added) and turn the background to red. It will not understand the CSS variable and then “falls-back” to the previous “understood” background-color.
If you don’t put this line, IE will not change the back ground color at all.
In case the browser supports CSS variables, then it will continue reading and will apply the code given by the CSS variable (in this case also red)

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

it just make background red

The purpose is to explain the browser fall-back
To pass the exercise you need to write on the .red box, not on the .root

Like this:

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

thanks tobiasman for your kind help .

No problem, you’re welcome

1 Like