How to add a fallback color

[candice]

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<style>
:root {
  --red-color: red;
}
.red-box {

  background: var(--red-color,red);
  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/98.0.4758.82 Safari/537.36

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

freeCodeCamp.org

[ArielLeslie]

@candice

Tell us what’s happening:
Describe your issue in detail here.

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

[Slimattcode]

Hello @candice,

@candice

background: var(--red-color,red);

This will not work, because you are mixing two different methods.

This is a css variable: var(--red-color), it is defined here:

:root {
  --red-color: red;
}

However these variables may not be supported by all the browsers in use. This is why you are asked to give a more general way of defining the background color: so that older browsers also display your site correctly. How to do this is explained in the challenge:

[I]t’s as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.

I hope this helps.

[candice]

Hello Matt,
Thank you for your help.