Improve Compatibility with Browser Fallbacks!HELP!

HTML-CSS
1

Tell us what’s happening:

What am I doing Wrong?

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 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

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

2

that is a variable fallback, needed when the variable value is invalid
you need to add a browser fallback, for browsers that don’t understand variables
you need to add a background declaration in the empty line, writing what you would write to give that color before learning about variables

(reset your code first, as any modification to the rest of the code will fail the tests, even if they are correct things to do usually)

3

How do I differentiate between a variable fallback and browser fallback?

4

You need to set a fallback for older browsers. See below.

<style>
  :root {
    --red-color: red;
  }
  .red-box {
    // the actual behavior here is, red is the fallback if --red-color does not exist or invalid.
    background: var(--red-color, red);

    // ------------------
    // Internet Explorer and other older browsers do not support the var() function
    // So, the fallback is to set the background twice. 
    // If the var() function is not supported by the user's browser, fallback to red
    background: red;
    background: var(--red-color, red);
    height: 200px;
    width: 200px;
  }
</style>
<div class="red-box"></div>
1 Like
5 

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

I understand that piece… that the purpose of the fallback is to have a second variable in case the first isn’t supported… but where am i going wrong?

6

you are asked to use a browser fallback, not a variable fallback

look at the other comments in that code that explain variable fallback