I got the code working . I just have trouble understanding it

HTML-CSS
#1

Tell us what’s happening:
The code works I am just having a little trouble understanding why it works.
I read the explanation something about how css doesn’t work with older browser like internet explorer. So I need a backup value. How does adding

background: red;

become the default and work with an browser such as css. I thought css doesn’t work with internet explorer. So how does the line above work and become the default with explorer?

Your code so far


<style>
:root {
  --red-color: red;
}
.red-box {
  background: red;
  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:84.0) Gecko/20100101 Firefox/84.0.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

#2

CSS is supported on Internet Explorer… or at least, most of it. The background-color property is supported, but CSS variables are not. This is why you need to set a fallback value in case the browser does not support variables, which in this case, is red.

#3

Hi,

CSS does work in IE, but as @GhostRoboXt said, it doesn’t support CSS variables.
Check it CSS variables

Since CSS means Cascading Style Sheet, the property is cascade, meaning same name property order is important.
If you write

background: red;
background: yellow;

Your element will have yellow color instead of red.
so in modern browser it will refer to var(--red-color) but in IE it will ignore the second background prop since it doesn’t support CSS var.