content
content copied to clipboard
mdn
Description of @layer
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
What specific section or headline is this issue about?
description
What information was incorrect, unhelpful, or incomplete?
'Rules within a cascade layer cascade together, giving more control over the cascade to web developers. Any styles not in a layer are gathered together and placed into a single anonymous layer that comes after all the declared layers, named and anonymous. This means that any styles declared outside of a layer will override styles declared in a layer, regardless of specificity.'
This seems to be describing the confusing implicit behaviour of cascade layers. It is describing the implementation ( local rules are put into highest priority anonymous layers - implicit layers/unlayered layers). Would it be simpler to just say that local rules, rules that have no layer names or anonymous layer - @layer {...} - have the highest priority compared with the others? I have a layer stack diagram from @bramus which elucidates the priorities in a clearer fashion.
What did you expect to see?
More clarity.
Do you have any supporting links, references, or citations?
https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/ https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#107
Do you have anything more you want to share?
No
MDN metadata
Page report details
- Folder:
en-us/web/css/@layer - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@layer/index.md
- Last commit: https://github.com/mdn/content/commit/77fcf82d0b44d7f63621aa95737b5a73bf40946b
- Document last modified: 2022-07-02T15:08:19.000Z
Would it be simpler to just say that local rules, rules that have no layer names or anonymous layer - @layer {...} - have the highest priority compared with the others?
Sounds to me like it would be, yes
I have a layer stack diagram from @bramus which elucidates the priorities in a clearer fashion.
If that diagram is licensed in a way that’d allow us to re-use it, then I think it would be great to include it in the https://developer.mozilla.org/en-US/docs/Web/CSS/@layer article
Can you put a PR together?
What license does it need to be?
For MDN purposes any license that allows the work to be reused is fine. Otherwise it’s up to you — with the main choice you need to make being whether or not you want to require attribution.
If you don’t want to require attribution, then CC0 is good, and the MIT license is also good.
If you do want to require attribution, then CC BY is good.
As far Creative Commons (CC) licenses, https://chooser-beta.creativecommons.org/ is a wizard thing to walk through the steps of finding the right CC license, by making choices for what features you want the license to have — and at the end it’ll tell you the license with the features you want — and give you a copy/paste-able license statement you can include with your work.
@sideshowbarker I’ve added a license statement to all Original Content posts on my blog
Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License
This includes the post on Cascade Layers.
There was discussion whether the illustrations from my blog can be used or not. Since then I’ve added a CC-BY-4.0 license to my blog to allow that.