4/2019 Improve Compatibility with Browser Fallbacks

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: red; var(--red-color);
    color: red;
    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/73.0.3683.103 Safari/537.36.

This is not valid syntax

The semicolon ends a rule, so you have a var(--red-color) hanging around

still not getting past the challenge (so frustrated)

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

The challenge asks you to add a background declaration that doesn’t use variables above the current one so that a browser that can’t interpret that line will have a rule above that to use, the last code you posted seems just the starting code

I’ve been trying this challenge for over an hour. I feel stupid and helpless but I just do not understand what I am doing wrong.

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

Reset your code, and focus just on the background rule
The one present uses the variable declared above. And that is awesome, you can use that variable to make various things in the web page the same colour, and then change only in one place to try different shades.

But we need to think also about old browsers. So we need a background property with just value of red so that if they can’t render the rule with variable will look above it for a rule they can use

The name of the property is the same, you need to give it a different value than the already existing one

ready to cry, I know you are trying to help, but I just don’t get it without an example.

If for example you where using --blue-color variable to set the color of some text, you would write

.box {
   text-color: var(--blue-color);
}

To be sure that also old browsers can add a color, you would add a second declaration without using variables above the first one

.box {
   text-color: blue;
   text-color: var(--blue-color);
}

In CSS the C is for Cascading, the used rule is the last one, but if that one can’t be used, the browser will use the one above that.

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

Nope, you don’t have a background rule that doesn’t use variables.

Why are you using box-color? You don’t have a rule box-color there

You have background: var(--red-color); that use variables. Add a background rule like this one but with a value like you would set a color normally in case you didn’t know of variables existence

Take a break, go for a walk, drink a cup of tea…

1 Like

going for the cup of tea, thank you for your patience