Improve Compatibility with Browser Fallbacks-Anyone please help me?

Tell us what’s happening:

Your code so far

  :root {
    --red-color: red;
  .red-box {
    background: drvar(--red-color);
    height: 200px;
<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/74.0.3729.169 Safari/537.36.

Link to the challenge:

What have you tried?

Why did you add dr in front of var. That should not be there.

All you need to do is, before background: var(--red-color); set the background to red as you would normally do.

1 Like

@Sushmita_Suryawanshi You place the fallback inside of the paranthesis after the word --red-color. Sparate the items in the paranthesis with a comma.

One more thing, always, always look for spelling errors, they are the cause of a lot of problems.

what @brandon_wallace is saying is a fallback in case the variable has not a valid value

you need a fallback for browsers that don’t know about variables. So, think, how would you declare background color if you didn’t know about variables? you just need to add that in the empty line above the existing background rule

@ilenia It is like this

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

right? That is the way I learned to do it.

That is a custom property fallback value, which is not what the challenge is asking for.

1 Like

that’s a fallback in case the variable doesn’t point to a valid value

this challenge is asking for a browser fallback, in case the browser can’t read variables at all, and in this case adding a fallback inside the variable is useless because it is not valid code for those browsers

1 Like

@lasjorg and @ilenia thanks for the info. You learn something new everyday.