Why does the colour red not show?

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:

1 Like

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

part, to make the red color visible.

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.

What’s wrong with writing this?

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

You are misunderstanding what the fallback is intended to do. If you are using a browser supports CSS variables, then it will still attempt to show what you specify (the red-wrong). The fallback value (placed before the use of the CSS variable for the background color), will only show if the browser did not support the CSS variable. Fallback values are to make your CSS cross-platform accessible. If a feature is not present in a browser, the fallback value gets used.

1 Like

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

If you changed red-wrong back to red, then it should work, unless you have changed something else.

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?

Yes, you got it now.

1 Like

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!