Tell us what’s happening:
Your code so far
<style>
:root {
--red-color: red;
}
}
.red-box {
background: var(--red-box, red);
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; rv:60.0) Gecko/20100101 Firefox/60.0.
Link to the challenge: https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks
It is fairly common for campers to not understand this challenge at first. Bottom line is that not all browsers will understand css variables so be prepared for that
You will have to put the fallback on its own line. Some browsers won’t “understand” var(…) css variables at all so that entire line will simply be ignored.
Put the standard property:value fallback on a line - all browsers will understand that line
Put the line using the css variable on the next line - older browsers will ignore this line, modern browsers will override the previous line with this property:value.
color: blue; /* all browsers will parse this line - the fallback */
color: var(--m…