freeCodeCamp Challenge Guide: Improve Compatibility with Browser Fallbacks

Guide
1

Improve Compatibility with Browser Fallbacks

Problem Explanation

We need to add a fallback to the background property of the .red-box class.
This is to make sure that also older browsers that do not support variable syntax can still have a value to fall back on. (If a property has an invalid value, then the applied property will be the one above it)

Example:
If we need to add a fallback for the background property of this .black-box class, we can do like this:

  :root {
    --black-color: black;
  }
  .black-box {
    background: black;  /* this is the browser fallback */
    background: var(--black-color);
    width: 100px;
    height: 100px;
  }

Solutions

Solution 1 (Click to Show/Hide)

Add a fallback to the background property before the existing background declaration:

 <style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>
70 Likes