Improve Compatibility with Browser Fallbacks?

Improve Compatibility with Browser Fallbacks?
0

#1

I don’t get what I did wrong with setting the declaration?? The bolded part “red” in the variable is what I added…

My 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 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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


#2

This is not what is being asked to do.

This background is for new browsers and it works great. So you do not have to change it.

What is being asked is to create another background, set to red.

And here is what happens:

Let’s say someone has an old browser, visits your website.
His browser will start reading the CSS from top to bottom,
It will find the background for new browsers, and
Problem! it cannot read it and it doesn’t understand it.

The solution: the old browser needs a language that it understands
and what we know is that it does understand the old style of declaring CSS.

Which means that a new background property should be added and set to red.


Improve Compatibility with Browser Fallbacks...whats the issue in code