Improve Compatibility with Browser Fallbacks #1

HTML-CSS
1

Tell us what’s happening:

Your code so far


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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks/

2

It needs to be two separate declarations, you can’t do it in one line. First set the color on background like you would normally do, then below that set the color using the variable.

Example:

:root {
  --fs: 16px;
}

p {
  /* fallback */
  font-size: 16px;
  font-size: var(--fs);
}