Browser faalback

HTML-CSS
1 
<style>
  :root {
    --red-color: red;
  }

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

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

You just have to add a background style before you use the CSS variable.

.red-box {

    background: red; /*Just like this*/

    background: var(--red-color);
    height: 200px;
    width:200px;
  }

The reason being that some browsers don’t support CSS variables so to render it correctly on all browsers it will look at the background property and apply it, when it hits the background property with the CSS variable it won’t know what that is and will apply the background property before that. In other words it will fallback to an earlier property.