Assessment wanted for Cascade skill test

MDN Learn
#1

Hello! Need assessment for Test your skills: The Cascade task.

My solution:
codepen

In this this example no different between “unset”, “initial”, “inherit” or “revert” solutions:
Unset make naturally inherited value and take background color from body;
Initial make initial value of browser.
Inherit - just inherited background color from body;
Revert - reverts the cascaded value to body.

Am i right?

And one more question. In a example on github ‘Helvetica Heue’ font name writed without ’ '. Is it ok?
image

#2

Hello @VladimirK

You are right that you could choose any of the four special keywords. Although your explanation is not completely right.
We need to know two thing to understand why those keywords make no difference:

  • Initial value of background-color is transparent
  • background-color is not an inherited property

Now lets look at those four keywords:

  • initial: The initial value as in the specification :arrow_right: transparent
  • inherit: Inherited from the parent. As the parent has no background-color specified that’s its initial value :arrow_right: transparent
  • unset: inherit for inherited properties or initial for non-inherited properties. As background-color is a non-inherited property that’s its initial value :arrow_right: transparent
  • revert: inherit for inherited properties or the default from the browser’s stylesheet. As background-color is a non-inherited property that’s the browser 's default :arrow_right: transparent

usnet and revert are very similar but for some properties the values for non-inherited properties are different. For example the initial value for display is inline. Therefore those rules behave differently:

/* Becomes "inline" (initial  value) */
h1 {
  display: unset;
}
/* Becomes "block" (browser stylesheet value) */
h1 {
  display: revert;
}

So mostly you want to use revert instead of unset. It’s also the newest of the four special keywords.

You are right. Fonts with spaces in their name should always be quoted. Nice catch! You could create a pull request if you like: https://github.com/mdn/css-examples/issues. If you want me to do it, no problem just say it.

Uff! That was a rather long explanation for this short exercise :sweat_smile:
I hope this clears it up a bit.

Bye :wave:
Michael

3 Likes
Assessment wanted for Cascade Skill Test I
#3

Thank you very much, mikoMK! Think i understand now.

Where can i found specification values and browser default values?

2 Likes
#4

Regarding initial value and inheritance MDN has you covered with that. On every page about a CSS property there is a section called “Formal definition”: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color#formal_definition

I don’t think there is any information on MDN about the content of browser style sheets but you could open the Firefox DevTools, select an element, go to computed and select browser styles (sorry it’s in german but you get it :slightly_smiling_face:)
browser styles

Another possibility is to open the style sheet itself with its resource URL: resource://gre-resources/html.css
It’s a pretty long file, but there is everything the browser does to give all elements their default (Firefox) value.

Cheers!
Michael

2 Likes
#5

Colors in a <span> and <a> are different elements, right?

In my codepen example:
(span) revert: inherit for inherited properties. Color is inherited property and set to red.

But selector of <a> set color to blue (i think it is browser default value of <a> color, because specification color is black - codepen)

I understand unset logic, but dont understand revert logic.

#6

Maybe it is a answer:

  • unset : inherit for inherited properties or initial for non-inherited properties.
  • revert : inherit for inherited properties (which inherited values from parents in default HTML values) or the default from the browser’s stylesheet. Or value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element (from revert page).

And i think no different between revert values and empty CSS declaration, but profit of revert is "all: revert" for isolation.

#7

Yeah, you are right. The browser style comes before inheritance. Therefore although color is inherited it is reverted to blue, because that’s what is defined in the browser style sheet.

That’s correct. The use case for revert is for example: You are doing fancy stuff with your <p> elements on your page, but then you want to have default <p> styles in your <footer>.

p {
  (some fancy stuff)
}

footer p {
  all: revert;
}

Another possibility would be to write:

header p, main p, aside p {
  (some fancy stuff)
}

("footer p" is still "normal")

Have a nice weekend!
Michael

2 Likes