CODEWITHSUNDEEP
cssstylesheetlayer
Bookamba
Bookamba

Reputation: 11

@layers priority, cant understand the documentation

Have just one question In the Mozilla @layer documentation I see the next one enter image description here

Which means that the lower priority has the user agent styles Then - usual user styles Then - styles in @layers

so if i have this code

@layer main {
  body {
   background: red;
  }
}

body {
 background: #1d1b1b;
}

Why I don't have red color? If styles in @layers has highest priority? There is mistake in documentation? Or what i understand wrong? Thanks

I tried to understand this visual priority screenshot

Upvotes: 0

Views: 116

Answers (1)

Kaiido
Kaiido

Reputation: 137084

Indeed that diagram was a bit misleading (even to me, while I'm used to its nomenclature...) Thanks to you, it's been amended by MDN contributor OnkarRuikar, so that it now includes the proper "Normal author declarations" label on the box comprising both the "Unlayered" and the various "@layer" sub-boxes.

It is now a bit clearer that an "user declaration" is not the same as an "author declaration".
Along with the changes made in PR #36656, which will link to the definition of the various terms, it should be entirely clear that an "user declaration" here refers to the declarations made by the user of the web-browser (e.g. browser themes), and thus that what you as a web-author writes is actually part of the "author declarations".

So a rule like

body {
 background: #1d1b1b;
}

in a style sheet loaded from an HTML page is actually part of the "Unlayered" sub-box, i.e. it does have higher importance than the "@layer" ones.

Upvotes: 0

Related Questions