about Improve Compatibility with Browser Fallbacks

Tell us what’s happening:

      <style>
  :root {
    --red-color: red;
  }
  .red-box {

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

<style>
:root {
  --red-color: red;
}
.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 (X11; Ubuntu; Linux x86_64; rv:83.0) Gecko/20100101 Firefox/83.0.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

Woops, looks like you accidentally deleted the part where you explain what you need help with!


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.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

you have added a variable fallback, which was covered in previous challenges, and you will need to delete it because tests will fail because of that

this challenge is about learning about browser fallback, it needs a css rule that doesn’t use variables so that also browsers that don’t understand variables can set a background color

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.