Improve Compatibility with Browser Fallbacks: What am I missing?

Tell us what’s happening:
I feel like I’m seriously missing something, but I dont know what it is. I keep getting the feedback:

  • Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

Your code so far


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

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

How would you normally set a background color without a css var? If someone visiting the site on a browser that doesn’t support var, it wouldn’t know what to make of that line so it will skip it, so it needs something that it will understand.

is the part of the code:

‘background: var(–red-color, red);’

not just that?
Reference: https://learn.freecodecamp.org/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable/

Nope. That is different. If you read the note in the link you provided, this current exercise deals with the situation where the browser does not support the feature (in tihis case the var syntax would be completely ignore in certain browsers). That is why you would still need to write an additional line to make sure the background is red when the var syntax is not recognized by a browser. The other lesson you linked to deals with a browser which does work with the var syntax but allows you to specify a fallback value in case it can not find the variable you specified (i.e. --penguin-skin).

For this challenge you do not change the following line at all.

background: var(--red-color);

Instead, you need to add a property/value pair before this line, so if the browser does not support var syntax, then the background will be red, but if the browser supports var syntax it will be whatever color you specify the css variable to be.

so, something more like:

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

I have done this but I can’t still get past it

If you create a thread using Ask for help button you will show your code and people will help

Be sure to not change the other background declaration at all

I have been able to do that. Thanks