What is the correct syntax for CSS browser fallbacks?

Curriculum Help
,
1

I’m working on the “Improve Compatibility with Browser Fallbacks” lesson. You’re supposed to add a browser fallback to background color in case the var doesn’t work, like on Internet Explorer. However, it doesn’t actually say what the correct syntax is.

The previous lesson provides an alternative in case the variable is invalid within the code. Its syntax is:

.penguin-top {
    top: 10%;
    left: 25%;
  
    /* change code below */
    background: var(--pengiun-skin, black);
    /* change code above */

Where the “black” is the fallback.

When I try to follow the same syntax in the subsequent one, which I’m working on right now, it doesn’t work. Typing it on a second line also doesn’t work. What am I supposed to do?


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:

2

Hi there!
Imagine that your page is being accessed by a browser that doesn´t support variables, so when it get to understand the class .red-box , it will find nothing to do with the background: var(--red-color); line.
But you want the background of that element to be red.

What would you do add above that line to say to the browser that you want that background to be red?

3

you must create a “background: # F00” element that you will put before “background: var (- red-color);”
and it will be good