Stock on Fallbacks

HTML-CSS
1

i’m stock on adding another background declaration with a different colour on an existing declaration.

Your code so far


<style>
  :root {
    --red-color: red;
    --new-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 6.1; 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/

2

Well good for you :3 but is this a question our you just wanted to share it?

3

oh its a question actually.

4

Okay what is your question?

5

Delete this inside of root: --new-color: red;. You should add background: red; inside of a red-box class. So:

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

It is good to make so, because some people have old browsers. In such browsers css variables can not be performed. But css values, such as red, can be performed in all browsers.

Browser executes first line with color: red. If that browser is smart enough to understand css variables, after that executes second line with var(–red-color).