Stuck in FreeCodeCamp lesson on 'fallbacks for compatibility with browsers'

HTML-CSS
1

Hi there,

I’m new to coding, and starting with the basic lessons of FreeCodeCamp.
I’m stuck in a lesson, and the “Hint” button leads me to a wonderful 404 page, so no help there.

In that lesson, I’m asked to change things on my ‘.red-box class’. I should add another background declaration right before the existing declaration and set its value to red.

As follows is the code I’m given to work on:

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

I’ve tried several options to get the ‘Fallback’ right, but when I run the test, it tells me that I haven’t “included a fallback with the background set to red immediately before the existing background declaration.”

I don’t get it, and would really appreciate your help :slight_smile:

Here’s what I tried:

background: color: red, var(--red-color);

background: red, var(--red-color);

background-color: red, var(--red-color);

background: #F00, var(--red-color);

background-color: red;
 background: var(--red-color);

And I also tried in the :root to add a color there, cause why not :woman_shrugging: :

  :root {
    color: red;
    --red-color: red;
  }

Thanks for your help!

Joan.
2

this is a browser fallback, a rule that the browser can use if the following line is nonsense for them (do not support variables)
the only issue is that you should be using the background rule, not background-color

1 Like
3

When it says to “add another background declaration”, it means that you should have two different lines that start with background:

1 Like
4

Thanks ieahleen :slight_smile: I actually found the same topic where you answered this morning as well. thanks a lot