Improve Compatibility with Browser Fallbacks-----

[Matty144]

Tell us what’s happening:

Your code so far

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

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 4.4.4; SM-T561 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Safari/537.36.

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

[ilenia]

not exactly what you needed to do…

the only thing you need to do is add a background rule in the empty line for the .red-class selector

@Matty144

.red-box {
   /* empty line to add something */
   background: var(--red-color,blue-box,red-box);
   height: 200px; width:200px;
}

any other change you make will make the tests fail

I suggest you reset your code

also, you need a background declaration that doesn’t use variables
this is because if a browser is not compatible with variables it will just nort read the line and search in the previous lines for something else that it thinks is valid to use

[codecblack]

This code isn’t working

[ilenia]

show your code if you need help with it

[codecblack]

Here we go…

<
:root {
–red-color: var (red, blue);
}
.blue-box { background: var (–blue-color, red-color);}
.red-box {

background: var(--red-color,blue-box,red-box);
height: 200px;
width:200px;

}

[ilenia]

reset your code
notice that in the .red-box declarations there is an empty line
to improve compatibility with browser that don’t know variables you need to add there a background rule that changes the color without using variables, like you would have done till a few challenges ago before knowing what css variables are

[codecblack]

@ilenia

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

i forgot what to include in the empty line. can you please put me through.

[ilenia]

@codecblack

background: var(–red-color);

this rule uses a variable
you need the same rule, background, but you need to set the color to red without using variables

if you don’t remember you can go back a few lessons to check how you do that without using variables