Css improving compatibility

HTML-CSS
1

Tell us what’s happening:
im putting the right code but its not passing me

Your code so far


<style>
:root {
  --red-color: red;
}
.red-box {
  background:red;
  background: var(--red-color,);
  height: 200px;
  width:200px;
}
</style>
<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/83.0.4103.97 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

You have a typo in this line of your code. This would call a variable named “red-color,” not “red-color”. Typos will drive you crazy!

3

that would still call a variable called red-color
the issue is that the tests are checking that you did not change anything, and are checking what’s written in the editor

there are not many ways to check how a css rule is created

4

I respectfully disagree with that. background: var(--red-color,); would not still call the variable red-color as there is a name mismatch. You can see this by commenting out background:red; in the code above. Once you do that you would see that there is no longer a color which means it’s not calling the variable.

The only thing the original poster changed was adding background:red; and a comma between the “r” in color and the closing parenthesis.

As stated above, the extra comma is the problem.

5

you are right, it seems CSS doesn’t accept trailing commas