Assessment For Cascade Skill Test

Hi there,
Hope all are well.

Skill Test Link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks.

My Try on codepen: https://codepen.io/umar-faruk96/pen/xxWwKzE.

Leave your thoughts and recommendations. You are great. :slight_smile:

Hi @umarFaruq

This is correct!
For background-color: initial; you could even use just a {} as the selector because every rule outside of layers are more important than rules inside layers.

Have a nice weekend,
Michael

1 Like

@mikoMK thanks for your note. I appreciate it.

1 Like

Hi @mikoMK,
In the task description the following instructions are given: ā€œā€¦write a declaration in a new rule that will reset the background color to white, without using an actual color value and without touching the lightgreen declarationā€¦ā€, and, as far as I understand, by applying the rule ā€œbackground-color: initial;ā€ we set the background color to transparent instead of white as the initial value of the property ā€œbackground-colorā€ is ā€œtransparentā€. Hence, the task isnā€™t completed, is it?
Best,
SweetBoySavage

1 Like

Hi @SweetBoySavage,
Well, thanks for your note. I could rather use

a {background-color: inherit} or a {background-color: revert}

Both are OK and give the same result. But I was wondering if I use
a {background-color: initial} what would be the pitfall then. So, I was missing your point. Thanks for that.

Best regards,
umarFaruq

2 Likes

Hi @umarFaruq,
My point is following:

  1. if we write a {background-color: initial}, then it is the same as writing a {background-color: transparent} because ā€œtransparentā€ is the initial value of the property ā€œbackground-colorā€ according to the spec.
  2. if we write ā€˜a {background-color: revert}ā€™, then the following happens (as mentioned on Initial, Inherit, Unset, and Revert | bitsofcode):

If no value is applied to a property in the author stylesheet (the styles we as the webpage authors write), the following steps are taken to find a value -

  1. The user defined stylesheet is checked for styles applied to that element.
  2. If nothing is found, the user agent stylesheet is checked.
  3. If nothing is found, the equivalent of unset is applied.

so in our example the ā€œbackground-colorā€ is set to ā€œunsetā€, which again acts like ā€œinitialā€ since the property isnā€™t inherited.
However, the task description explicitly states: " ā€¦reset the background color to whiteā€¦", which, in my perception, should look something like this: a {background-color: white}, and, perhaps, canā€™t be achieved using only these special values.

Hi @SweetBoySavage,
I get it. But hereā€™s is this case, if we use a {background-color: white} doesnā€™t this violate the rule given in the task page as follows:

To write a declaration in a new rule that will reset the background color to white, without using an actual color value and without touching the lightgreen declaration

which basically says I canā€™t use an actual color value (in our example, white is the actual color value). This is what I understood and assessed regarding the task.

Your point about a {background-color: revert} is right also. I finally got it after doing some research and thanks for the link.

So, it seems there is no safer option than a {background-color: inherit} unless we count giving the element a white background without using the actual color value meant to be no color at all (which is transparent at the end).

But the real deal is whether we use inherit, initial or revert the result is pretty same. I checked the devtools for the computed value of the element and the result is rgba (0,0,0,0) for all of them.
In contrast, a {background-color: white} results rgba (255,255,255,0), but its use isnā€™t allowed as the task page guides.

So, what to do now? Leave your thoughts and sorry for my English. m trying to making it better. Eager to hear you.

Hi @umarFaruq,
I guess there is something messed up as there are inconsistencies among the code provided in the interactive editor, the HTML template and the solution. It seems that the task has been updated recently, but the HTML template and the solution havenā€™t. Perhaps, this is what the taskā€™s old version looked like.

1 Like

Hi @SweetBoySavage,
Thanks for your reply and some valuable links. But it seems both the solutions (the older and newer one) made the possible solution as: a {background-color:initial} while they quotes:

In this case I am using inherit to set the background back to be the same as its parent element.

made me more confused. :confused:
I didnā€™t get what it tried to say at the end. Help me with this.

Hi @umarFaruq,
If we take the HTML template from the old task, and add the following rule:

div, div ul, div ul li, #outer #inner ul li a
{
background-color: inherit;
}

, which sets the propertyā€™s ā€œbackground-colorā€ value for every element inside to ā€œinheritā€ (it is necessary because "only direct child elements can inherit a CSS property from its parent elementā€¦"), then the <body> elementā€™s ā€œbackground-colorā€ propertyā€™s value ā€œ#fffā€, which stands for white color, is inherited by the descendant elements of <body>, including the links. As a result, we have written a declaration in a new rule that resets the background color to white, without using an actual color value.
P.S. In this case the computed value of the targeted elements is rgb(255, 255, 255).
This is how the code looks: Edit fiddle - JSFiddle - Code Playground

1 Like

Hi @umarFaruq and @SweetBoySavage

From a strictly technical view point @SweetBoySavage is right about the background-color not being white but transparent. I think what the exercise is trying to ask for is that the background should appear white again (no matter if the element, one of the parents or the default browser background are responsible for it).
Maybe the text of the question could be improved.

Thatā€™s indeed true and should be updated. I also think that the question text is confusing in the new because there are really two instructions woven into each other.

ā€œInstruction 1ā€ (To write a declaration in a new rule that will reset the background color to white, without using an actual color value) and ā€œInstruction 2ā€ (without touching the lightgreen declaration, use the cascade layer order to make the links rebeccapurple).

@SweetBoySavage Are you interest in opening an issue on MDN regarding these two points? Thereā€™s a link with a template at the bottom of the article: Report a problem with this content on GitHub

Have a nice day,
Michael

1 Like

I just did! Check: https://github.com/mdn/content/issues/18443

2 Likes

Thanks @SweetBoySavage @mikoMK both of you.
Cheers.

1 Like

Thank you very much @SweetBoySavage!

1 Like