Improve Compatibility with Browser Fallbacks2

HTML-CSS
1

Tell us what’s happening:

I don’t understand what the code is supposed to be

Your code so far


<style>
  :root {
    --red-color: red;
  }
 
  .red-box {
    background-color: red;
    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 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0.

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

2

The property is background, not background-color.

3

Let’s walk through this step by step.

to set the background color of an element you can use the background-color property or simply use the background property. you can read here for more information.

For this example you are instructed thus:

Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red.

So you should use the background property to effect your changes. This will take advantage of the cascade because of the order of declaration between the two background statements. That is, since background: red is the first declaration it will be applied first, then if the browser supports the second variable background declaration that color will be applied overwriting the first. Otherwise if the second (variable) color is not supported the browser will “fallback” to the first color declaration.

Your only mistake is using background-color instead of background

2 Likes
4