Fallback Variable

HTML-CSS
1

Tell us what’s happening:

There is no explanation of how to do this?

Your code so far


<style>
:root {
  --red-color: red;
}
.red-box {
  background: var(red, --red-color);
  background: var(--red-color);
  height: 200px;
  width:200px;
}
</style>
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:79.0) Gecko/20100101 Firefox/79.0.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

This means that if you do want to provide a browser fallback, it’s as easy as providing another more widely supported value immediately before your declaration

So if the browser doesn’t understand CSS variables, what would you use as a background colour instead of a variable?

3

I don’t understand what that means. It says to put the declaration in the root. So I wrote:
:root {
var(–penguin-belly: pink);
}

What else am I supposed to do? Nothing else is discussed in the lesson and this is really annoying when they just say the same thing over and over again but provide no information.

4

hey :wave:
This section u are at want to improve the compatibility with the browser,so you should add another background with the color of red.
e.g

style>
  :root {
    --red-color: red;
  }
  .red-box {
background:red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>
5

It describes the solution: it does provide the information, you’re maybe overthinking it. It doesn’t provide an example, because the example would be the answer:

If a browser doesn’t understand CSS variables, if you say background-color: var(--a-variable);, the browser will ignore it.

So what could you write as a value for background-color that any browser would understand? This isn’t a trick question, it doesn’t use anything you haven’t been shown