Https://www.freecodecamp.org/forum/t/freecodecamp-challenge-guide-improve-compatibility-with-browser-fallbacks/301087

Why need a new line for background?

<style>
:root {
  
}
.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 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36 OPR/67.0.3575.79.

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

Welcome, montanio.

I am not sure what you were trying to ask…

Whilst, in programming, there are often many ways of achieving the same outcome/output, and there are general best practices, freeCodeCamp’s curriculum aims to bring a student from no knowledge in the realm of programming, to enough knowledge to further their own studies.

So, for the challenges in the fCC curriculum, the only way to pass the tests and submit the solution, is to do what the instructions ask. Not for any other reason than it would be insane to accommodate very possible solution whilst testing for the correct output on every lesson.

If, however, you feel there has been a blatant overlook of software design practices, then you may open a topic on the #contributors sub-forum to discuss rewording/reteaching a topic.

I hope this is what you were asking.

this is not a browser fallback, for browsers that do not support css variables this is not a valid value.
To add a valid value for browsers that do not support css variables you need to add a second background declaration above the existing one to give those browsers a valid value for the background rule

1 Like