Browser Fallbacks _ why we need to use two type format?

Tell us what’s happening:

I don’t know why we have background: red, we also use background: var(--red-color);. I think background: var(--red-color); is unnecessary

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/79.0.3945.117 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

you would use variables in case you want to use the same color (or other property) in many places in your page (like, you want to use just 3 colors in your page, each of those colors will be used in many places), then when you want to try different shades of the same color, you would need to search in your code for all the places in which that color is used, be sure to change each one to the right new color… and repeat again if you change idea.
Instead, using variables, you can just change the colors held in the variables, and all 72 elements in which that color is used wll change accordnigly.

Here it is being taught that not all browsers are able to read variables, and if you want to have your page compatible with older browsers you need a fallback value like shown here. If you don’t want to be back-compatible, you can just use the variable, and not use the other

I know in the example/practice we can use only one and don’t need the other but that defeats the purpose of learning what each variable does.

yes, I understand what you say, but I mean, we add background: red to prevent the situation when browers doesn’t support variable. But, in the code above, we set the value of variable is red, it also the value of background: red, so, if it is the same value, why we have to use both? why don’t we just use “background: red?

yes, I understand what you say, but I mean, we add background: red to prevent the situation when browers doesn’t support variable. But, in the code above, we set the value of variable is red, it also the value of background: red, so, if it is the same value, why we have to use both? why don’t we just use “background: red? :smiley:

this is teaching example, not a real project, teaching examples are never real use example

1 Like

true, in this example we can omit one, but the main focus of the exercise is to learn what each variable does.

1 Like