Improve Compatibility with Browser Fallbacks44

Tell us what’s happening:
this lesson has no hint or video and i am not sure how to do what they are asking could someone point me in the right direction?
Sincerely,
Christine

Your code so far


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

</style>
<div class="red-box" ></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

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

First thing is to understand what the topic is about. There are two aspects at play in this lesson:

  1. With CSS the language compiler sifts through all of your code, in the order that you write it.
  2. Not all browsers have a compiler that understands all the features.

On the first point: Any code you write in CSS is read in the order you wrote it. So, if you have any duplicate attributes that have different values, the compiler will set the last value as the only value. Example:

* {
  color: red;
  text-align: center;
  color: blue;
}

The color attribute will be blue. You may as well not have written the first line.

On the second point: Let us say that a browser does not know what the colour blue is. Then, it would be a good idea to have a different value for the color attribute. Normally, this is done by adding a second value:

* {
  font-family: san-serif, arial;
}

This could be written as:

* {
  font-family: arial;
  font-family: san-serif;
}

Putting the preferred property last.

However, if the browser just does not understand the syntax whatsoever, then you cannot use the general method of separating values with commas, because the compiler will completely discard the whole line.

So, in short, you do not know whether or not a browser understands an advanced CSS feature such as variables. So, set a fall-back property that every browser will understand.

Hope this helps without giving the lesson’s exact answer.

thank you so much for your explanation! I was able to figure it out on my own from there! in much appreciation,
Christine