Cant get exercise working

HTML-CSS
1

I can get test to pass simply adding ‘background: red;’ where i have ‘black’. but trying it with black does not work (i don’t think fallback should be the same as existing declaration color anyway).
when i invalidate the variable color it is just white (blank), not black.

  **Your code so far**


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

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

also, if i comment out the variable expression i can see the black expression is working:

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

It won’t pass if you make the fallback black because the instructions tell you to use red.
There isn’t any reason why you wouldn’t want the fallback to be the same color. Usually you would want it to look as close to the same as possible.

4

yes, i can get it to work.
but it doesn’t work.
it’s not ‘falling back’ to red or any other color given in the relevant statement

6

I don’t know that you can really force the fallback.

When your browser parses the CSS of a webpage, it ignores any properties that it doesn’t recognize or support

Your browser does recognize and support variables, so it isn’t trying to handle that failure.

1 Like
7

oh. so it is just treating ‘notreallyred’ as a color variable with no value?
ok, thnx

8

My guess is that it’s equivalent to setting it to something like none, or unset. Different browsers handle this sort of thing slightly differently, but it’s not quite the situation that this challenge is preparing you for. This challenge will be more relevant at some point when you want to try out a new feature that isn’t implemented in all browsers, or one which is done slightly differently across browsers.

1 Like
9

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