MDN Leaarn - Precedence order of regular cascade layers / Developer tool doesn't show correct style applied?

[alle]

MDN URL:

Cascade layers - Learn web development | MDN

### What specific section or headline is this issue about?:

Precedence order of regular cascade layers

### What information was incorrect, unhelpful, or incomplete?

### What did you expect to see?

Hi there,
I’m newbie in terms of codding but active learner, so please apology for any mistake. This is only a question for better understanding.
So am l missing something here?

In the screenshot above, developer tools:
@layer A { h1 { box-shadow: -5px 5px lightblue !important; } }
…is overridden by unleyered h1:
h1 { box-shadow: 5px 5px lightgreen !important; }
…but at the end, layer A box-shadow still applied. By the screenshot bellow !important layered style have precedence over unleyered !important style. So where is the point?

Thank you and appreciate for any help.
Alex

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#precedence_order_of_regular_cascade_layers

Do you have anything more you want to share?

No response

[mikoMK (Michael Koch)]

Hi @alle and welcome to the community

Good observation! This is indeed a bug in the Firefox DevTools. The displayed light blue shadow in Firefox is correct, but the DevTools are wrong.

A month ago another user discovered this and a DevTools developer confirmed the bug an opened two issues.

Cascade layers - Learn web development | MDN

I pasted the code from the example into two files, one .html and one .css file. I the switched the order of the layers to B and then A, so that important styles in B take precedence over important styles in A. I then used Firefox Developer Tools to inspect the h1 element, and while the computed panel shows the box shadow styled as declared in layer B, in the rules panel this is crossed out and instead the rule from the unlayered h1 style block is used. So my question now is whether there is …

Have a nice day,
Michael

[alle]

@mikoMK and Thank you.

So this is something that we can face friquently with dev tools as i already saw this few times during my practice with coding and i wasn’t sure if I’m lacking knowladge or is it a bug with dev -tools. Anyway Thank you for a clarification.

Have a nice day to you to,
Aleksandar

[mikoMK (Michael Koch)]

@alle

So this is something that we can face friquently with dev tools

Yes, whenever you currently deal with layers, you could encounter this problem in DevTools. What’s always correct is how the code is displayed in Firefox. When practicing with layers you should therefore focus on the result in the browser and not what DevTools displays.