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?
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.
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.