Basic CSS: Improve Compatibility with Browser Fallbacks

Basic CSS: Improve Compatibility with Browser Fallbacks
0
#1

I added red to the background and it is not working. I tried doing it in different browsers (IE, Firefox, and Chrome).

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

	.red-box {

		background: var(--red-color, red);
		height: 200px;
		width: 200px;
	}
</style>
<div class="red-box"></div>type or paste code here
4 Likes
Css Improve compatibility
I am stuck in this challenge
#2

Hi there froxas908, i had the same problem. Carefully read the instructions before you try it:

Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

When you put it like this: “background: var(–red-color);” you are not reading the instructions. It says “before” the existing background declaration. So the answer will be:

background: red;
background: var(–red-color);

26 Likes
#3

thank you :slight_smile:

2 Likes
#4

I had the same mistake, thank you so much!

1 Like
#5

This is a fallback in case the browser doesn’t support custom properties (variables).

background: red;
background: var(--red-color);

This is a custom property fallback value in case the given variable is not yet defined.

background: var(--red-color, red);

2 Likes
#6

thanks :sunglasses::sunglasses: been getting this wrong for like …:japanese_goblin:

1 Like
#7

Thank you i fall in the same mistake xD

1 Like
#8

wtf:joy: thank you omg

2 Likes
#9

I think “improve-compatibility-with-browser-fallbacks” is again broken.
Can anyone confirm?
PS : i can’t yet post the links

1 Like
#10

Why do you think is broken?
If you use the “Ask for help” button inside the challenge you will create a forum post that has already your code formatted in it
Or just copy your code here using the </> button in the post editor to format you code

2 Likes
#11

i had the same problem also, Thank you :smiley:

1 Like
#12

Yes it is!! been stuck for a few hours, looking for the right answers from this forum…but none of the answers did not work :confused:

1 Like
#13

Thanks. i have this problem now but with your comment, i have been able to solve the background issue.

#14
background: red;
background: var(--red-color,);

and still not working  --' 
3 Likes
#15

It is not working tried everything possible;;;.

2 Likes
#16

This worked:
background: red;
background: var(–red-color);

2 Likes
#17

You have changed the existing css rule, that may be the issue

1 Like
#18

Thanks for the solution bro!

2 Likes
#19

It’s actually working. I had the same issue (with writing the code and it was saying that I hadn’t done it properly), but I chose to “Reset all code” and then just wrote one line -> background: red; and it worked. maybe if you change something in CSS (though you delete) it has some kind of…bug?

2 Likes
#20

I had the same too
Thanx

1 Like