Improve Compatibility with Browser Fallbacks 2019

Tell us what’s happening:

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

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

You have not asked a question.

I am having Problem inBasic CSS part this module is not showing the success when everhthing is write

you don’t need to edit the existing code, it will make passing tests difficult if you do that

instead you need to declare the background color thinking of brosers that don’t support variables - how would you do that if you didn’t know about variables?

how can i do that, i am on chrome browser

it doesn’t matter your browser

think before the last few lessons, before you found out about variables, you already knew how to set the background color, you need to remember how to do that.
This is to increase compatibily with old browsers

So, now that you have remembered how to set the background color without using variables, just use it before the current background rule, so that if the browser doesn’t know what the line with variables mean, it will search for above it for something that it knows

1 Like

yep its done and am loving this community