Help me! i cannot understand!

HTML-CSS
1

** actually i just… cannot understand what to do because there is no video!`**

my 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 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

it is telling you to set another background right before the existing one and set the value to red.

Sometimes, they have questions that looks kind of “silly” but you can think of it like if the existing background(the one with var value), you have spelling error there(codes shown below). The first line will be taken instead of the second line.

.red-box{
    background: red;
    background: var(--reed-color);
}
3

There are some browsers that cannot interpret CSS3 but they can interpret CSS2, so you make a CSS2 fallback for them.
Browsers ignore the line that they didn’t understand and jump to the next line, for example:
you have code like this :

background: red;
background: var(--red-color);

the browsers who don’t understand CSS3, will just ignore the second line and keep going, but the browsers who do, will read the second line also, which then changes the background color, because of cascading behavior of CSS.

So both browsers understand, the old one and the modern one, and that increases compatibility.

1 Like