Why does the colour red not show?

[DJFearRoss]

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

  **Your code so far**

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

“In that case, the browser will use whatever value it has for that property. If it can’t find any other value set for that property, it will revert to the default value, which is typically not ideal.”
I assumed because the browser (Chrome) cannot find the colour specified by the variable, it will revert to background: red. However, it does not. It shows nothing.

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

freeCodeCamp.org

[htmlfan]

I had pasted your code in my browser, it works. But, maybe you need to remove the -wrong part in the

@DJFearRoss

--red-color: red-wrong;

part, to make the red color visible.

[DJFearRoss]

But this part background: red; is meant to be the fallback code.
That’s why I put an unrecognisable colour red-wrong

So as it the colour red-wrong doesn’t exist it should use background: red;

Not sure why it does’t work for me.

[jwilkins.oboe]

What’s wrong with writing this?

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

[DJFearRoss]

I’m trying to test what it says here. Maybe I’ve misunderstood this.

If --red-color: red is an invalid colour. Then it should go to background: red; to get the colour.

As such, to test this I renamed it red-wrong, so then it should pick up the ‘red’ from background: red;

But I get nothing

The Topic is, " Improve Compatibility with Browser Fallbacks

[DJFearRoss]

Thanks. So you are saying it is ONLY to do with the browser you are using. So if it’s a browser that supports variables, it will NOT take the fall back value background: red;

So in this case the browser (supported) thinks it is displaying a colour called red-wrong and hence does not take the fallback colour background: red;. Am I correct in this thinking?

[DJFearRoss]

I opened up a HTML online editor in IE to check this variable issue with the following code.

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

The output did indeed give a blue box. So, IE as stated does not recognize CSS variables.

Sorry for the long post on this simple issue! Just happy I could check this for myself!