Tell us what’s happening:
Hi
Please help me figure out what’s wrong with my code while creating a fallback option for background color.
Thanks
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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.
What challenge is it?
If it is the one for browser fallback you need to have a css rule that can be used by the browser if the browser don’t use css variables - the fallback you have now is in case the variable value is not valid
Hi
Variable is being used to set the background color of the .red-box class. It says to add another background declaration right before the existing declaration and set its value to red. That’s what I am not getting!
@ShyaamKarthi. It means right before the whole declaration. You’ll end up with two background-colours. The first is the fallback for old browsers (like IE or the one on iPad2) and the second is the variable. The old browsers ignore variables, so they will ignore the whole declaration in the code.
If you use variables for color the old browser will show the result in black and white unless you tell them to show a different color.
And that’s where css’s cascade comes in handy. Old browsers will look at the first background-color and are happy with that. New browsers notice the second background-color and use that one.
Variables are great when building a website or changing an existing one. Easy to adjust color without going through all the code. The fallback can wait until the whole thing is finished.
Sorry i still don’t get. I have used variable i.e --red-color as well as “red” for fallback. Please share a screenshot of code. That would be very helpful.
Thanks
background-color:....;
background-color: var(...);
The old browser will ignore the second one and use the first one.
The modern browser will skip the first one and move on to the second one.
Good luck!
I tried your code. Still it does’nt work.
@ShyaamKarthi, your code is fine. But the lesson uses the short-code for background-color which is background.
So if you change that you can finish this lesson.
But in real life the code you’ve written above is fine.
I changed “background-color” to just “background” as you said.
Works perfect ! Thanks a lot !
i was stuck with the same problem, i was typing background-color as well…
