Cascade layers - Learn web development | MDN

MDN Learn
#1

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 a reason for this or whether this is a bug in the Developer Tools?

Screenshot from 2023-03-18 10-04-26
Screenshot from 2023-03-18 10-04-261920×1053 229 KB

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

Hi @jruota

I agree that there seems to be a bug in the DevTools. Even when inspecting the original code from the article you linked there seems to be wrong information in the rules and computed panel. The box-shadow is lightblue but there are contradicting values in the DevTools:

2023-03-24_22-39
2023-03-24_22-391914×743 115 KB

I hope @Nicolas_Chevobbe doesn’t mind when I’m tagging him. :slightly_smiling_face: He’s one of the DevTools Developers who’s also active here on Discourse.

Have a nice day,
Michael

#3

Thanks for the ping, it does look like issues in DevTools.
I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1824652 and https://bugzilla.mozilla.org/show_bug.cgi?id=1824653

1 Like