How do i set a fall back color to the backround

HTML-CSS
1

Tell us what’s happening:

" It looks like a variable is being used to set the background color of the .red-box class. Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to a red"

This is the instruction given I am confused on what to do here.

The code:

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

Your code so far


<style>
:root {
  --backround-red: 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

Hey @monteveeno,

Welcome to the forum. We are glad to have you here.

CSS variables are not compatible with all browsers (Especially IE). The challenge is trying to teach you that. Declaring the background color as a fall back is improving your page’s compatibility.
So, the challenge is asking you to declare one more background before the existing one.

background:red;
3

Thanks man this was helpful