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

Css Improve compatibility
#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);


#3

thank you :slight_smile:


#4

I had the same mistake, thank you so much!


#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);


#6

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


#7

Thank you i fall in the same mistake xD