Improve Compatibility with Browser Fallbacks: i dont know what to do

Tell us what’s happening:
i kinda haveno idea what to do to pass this challenge

Your code so far


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

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

The point of this exercise is that CSS Variables such as --red-color aren’t compatible with older browsers like IE. The browser responds by ignoring the background: var(--red-color);
declaration. The way this made sense to me was essentially commenting the line out.

What the exercise wants you to do is simply to set the background: color declaration to red without using the CSS Variable in the blank line before the potentially incompatible line. This provides a “default” to fallback on.

For this challenge, the only task is to add another background declaration before the

background: var(--red-color);

Simply add:

background: red;

This is lesson is teaching you about improving compatibility in your code using CSS. As in some browsers some CSS variables will not be supported. Hope this helps!

@jmoore197 @scmcodes thank you i finally got it.

2 Likes