Incompatibility the color and goes

HTML-CSS
1

hi guys, i passed this change but I have a question. why it’s written here white,
.belly {
top: 60%;
left: 2.5%;
background: var(–penguin-belly, white);whereas color of belly is pink.

Screen Shot 2020-12-06 at 11.26.22 PM
Screen Shot 2020-12-06 at 11.26.22 PM2368×1192 354 KB

thanks!

Your code so far


<style>
:root {
  /* Only change code below this line */
--penguin-belly:pink;}
  /* Only change code above this line */


body {
  background: var(--penguin-belly, #c6faf1);
}

.penguin {
  --penguin-skin: gray;
  --penguin-beak: orange;
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
}

.right-cheek {
  top: 15%;
  left: 35%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.left-cheek {
  top: 15%;
  left: 5%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}

.penguin-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin, gray);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin, gray);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 0%;
  left: -5%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(45deg);
  z-index: -1;
}

.left-hand {
  top: 0%;
  left: 75%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 30% 120%;
  transform: rotate(-45deg);
  z-index: -1;
}

.right-feet {
  top: 85%;
  left: 60%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(-80deg);
  z-index: -2222;
}

.left-feet {
  top: 85%;
  left: 25%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(80deg);
  z-index: -2222;
}

.right-eye {
  top: 45%;
  left: 60%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.left-eye {
  top: 45%;
  left: 25%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.sparkle {
  top: 25%;
  left: 15%;
  background: white;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}

.blush-right {
  top: 65%;
  left: 15%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.blush-left {
  top: 65%;
  left: 70%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.beak-top {
  top: 60%;
  left: 40%;
  background: var(--penguin-beak, orange);
  width: 20%;
  height: 10%;
  border-radius: 50%;
}

.beak-bottom {
  top: 65%;
  left: 42%;
  background: var(--penguin-beak, orange);
  width: 16%;
  height: 10%;
  border-radius: 50%;
}

.penguin * {
  position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
  <div class="right-hand"></div>
  <div class="left-hand"></div>
  <div class="right-feet"></div>
  <div class="left-feet"></div>
</div>
<div class="penguin-top">
  <div class="right-cheek"></div>
  <div class="left-cheek"></div>
  <div class="belly"></div>
  <div class="right-eye">
    <div class="sparkle"></div>
  </div>
  <div class="left-eye">
    <div class="sparkle"></div>
  </div>
  <div class="blush-right"></div>
  <div class="blush-left"></div>
  <div class="beak-top"></div>
  <div class="beak-bottom"></div>
</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5.

Challenge: Inherit CSS Variables

Link to the challenge:

2

It is used in case the custom property (variable) does not have a value (or an invalid value). It is use as the fallback value.

1 Like
3

thanksss a lot. I read the articles which u sent but didn’t get yet in the case of our challenge. as I understood fallback is for risolving the bug but in the case I can’t get it.

4

A fallback only happens when a value is not present so in this example if --penguin-belly was not present only then the color would have been white.

5

before you wrote the value for that variable, the value had no value

if a variable does not have a value, the fallback is used - in this case it was put there to avoid having the elements be transparent

1 Like
6

hi, @mdshariq and @lasjorg!
I understand your suggestions, but it should be changed to pink after add variable. but it doesn’t. I think the question @SARA1985 posted is for this problem.

7

No I don’t think so the question was that why is there a white written there when it has no effect on the color.

8

@mdshariq @lasjorg @Jack628 honestly I didn’t get it yet. my question was that why there is written white for part of .belly and right and left cheek. I cant get it!

9

This, right?

background: var(--penguin-belly, white);

The value white is a fallback value.

Example:

Just as an aside because I mentioned invalid values.

Validity and values

The classical CSS concept of validity, tied to each property, is not very useful in regard to custom properties. When the values of the custom properties are parsed, the browser doesn’t know where they will be used, so must, therefore, consider nearly all values as valid.

Unfortunately, these valid values can be used, via the var() functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the new concept of valid at computed time.

10

in CSS you can give multiple values to a property in sequence of their priority like for example :
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
Segoe UI is the first one so if this font is available on system it will be applied if not the next one Tahoma if this is available it will be applied if not then the next and so on until the last one i.e sans-serif which is most available of them all will be applied.
Similarly background: var(--penguin-belly, white); will check if --penguin-belly variable is available if yes then its value i.e. pink will be applied if not then the next value in the sequence is white so white will be applied. This sequence of values are called fallbacks because next one only gets applied when the first one fails. They are just for precautions ideally the first one in the sequence will be applied but in case something goes wrong we don’t want to lose control of our style and submit to the browser default so we decide what should our element look like if the first value doesn’t get applied.

11

@mdshariq @lasjorg thanksss guysss for your help. finally got it. :slight_smile:

1 Like