How to code this right

how to include a fallback with the
background set to red

  **This is what I  code but still  can't pass it**

:root {
  --red-color: red;
.red-box {
  background: red;
  background: var(--red-color, red);
  height: 200px;
<div class="red-box"></div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

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

It’s not working as a CSS variable anymore after you made this change in this line. Let this line be how it was before.

1 Like

like this

but since you changed this line the tests fail

h2 {
color: green;

h2 {
color: pink;

h2 would be pink .
css work from bottom to top in terms of specificity.
so the bottom part has the specificity.

we are using this rule to increase browser compatibility.
so when our

--red-color: red;

is not working, it would move on to the next color.

--red-color: reeed;  // wrong color

.red-text {
color: red; //top-part will work

color: var(--red-color);  //bottom-part will not work

too confusing ?

Done thanks all
I finally get it

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