How to Improve Compatibility with Browser Fallbacks

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background-color : 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/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks/

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

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

4

Could you describe what your problem is?

What are you trying to do, and what is actually happening?

5

You’re using a background-color declaration, you should use only background. Also, you can’t have a space between the declaration and the colon “background-color :”.

6

Hi there @ghukahr.

While I respect your efforts in trying to help someone else, it’s always a good idea to revise and check the information/help you are trying to give.

1. The background-color property works just fine here, the background property is actually a short hand of many properties (8 to my count) related to the background, you can find more information on that here.

2. While it is not common practice to include spacing between the property and colon background-color : this does not effect the behavior, or the ability for the declaration to be read by the browser.

I do agree that it is a bit more organized to leave out this spacing though :slight_smile:

7

@Tunze As said above, some more information in regards to the problem you are having, and what it is you are trying to execute will help others provide an appropriate response to the post.

With a bit more detail, there are plenty of people that would be happy to help you out!

8

@Kyle-S-Thompson Thanks for giving us a more comprehensive answer.

My intention here was to help @Tunze to pass his code in the challenge without giving him the answer directly. I actually run his test in the challenge and it won’t accept background or even the space before “:”. So the problem is not with his code, the problem is with the challenge test not accepting his answer. And thus, my answer to help him.

Maybe a PR to make the challenge tests more relaxed?