Https://www.freecodecamp.org/learn/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

HTML-CSS
#1

Tell us what’s happening:

Please i need help on this. I dont really understand the question, thus i am unable to arrive at the answer

Your code so far


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

  background: var(--red-color);
  height: 200px;
  width:200px;
}

</style>
<div class="background 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/78.0.3904.108 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

#2

Some browser versions do not understand CSS variables, so background: var(--red-color) will not work. The solution is to assign the background property twice. First you assign it without a variable, and then you assign it with the variable. A browser that does not understand variables will ignore the second assignment.

#3

The instructions did not instruct you to create a class named background either.

#4

Hi BlackEinstein,

I don’t know if this was answered but here’s the solution and explanation.

Some browser versions do not understand CSS variables, so background: var(--red-color) will not work which is why you have to add background:red; right before the background: var(--red-color); . Hope this helps.

#5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

1 Like
#6

thank you.Its been most helpful

#7

Yes boss. I understand.

#8

Oops I’m sorry I guess I completely neglected that fact. I’m new to forum myself. I will make sure I only give hints in the future.

Thank you.

#10

Add background: red;
just before background: var(--red-color);

#11

Thank you soo much for solving it.
i was confused.

#12