Improve Compatibility with Browser Fallbacks help!

Tell us what’s happening:

hey guys! I got a problem over here, I don’t know how to improve the browser compatibility by adding another background declaration right before the existing declaration. It has to be red!

THANKS FOR HELPING! MUCH LOVE!

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15.

If you didn’t use variables how would you say what color the background should be?

You need to add a rule that doesn’t use variables for browsers that don’t support variables

1 Like
  :root {
    --red-color: red;
  }
  
  }
  .red-box {
    /* you need to add your compatible declaration here */
    background: var(--red-color); /* this is the existing declaration */
    height: 900px;
    width:500px;
  }
1 Like

remember what the C in CSS stands for
for example

p {
color: blue;
color: red;
}

this would give you red text because the second rule overrides the first.
with browser fallbacks, you write a rule first intended for browsers that do not support variables, then immediately after that rule you write another rule that either overrides it if the browser does support variables or it is ignored if the browser does not support variables

1 Like