From 54c533bb67c499db23bd1214a55b64f2bb498400 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 13 Nov 2024 03:52:14 +0530 Subject: [PATCH] fix(css): define terms in layer-cascade diagram (#36656) * fix(css): define terms in layer-cascade diagram * Update files/en-us/web/css/@layer/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/css/@layer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/@layer/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/css/@layer/index.md --------- Co-authored-by: Estelle Weyl Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/@layer/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/files/en-us/web/css/@layer/index.md b/files/en-us/web/css/@layer/index.md index 83660c6ec33d214..f6a08ebf6dbfda9 100644 --- a/files/en-us/web/css/@layer/index.md +++ b/files/en-us/web/css/@layer/index.md @@ -38,6 +38,9 @@ The following diagram shows layer priorities where layers are declared in 1, 2, ![Diagram showing cascade layer priorities](https://mdn.github.io/shared-assets/images/diagrams/css/at-rules/layer-cascade.svg) +As noted in the above diagram, _important declarations_, declarations with the `!important` flag, have priority over _normal declarations_, or regular declarations without the `!important` flag. The order of precedence among important rules is the inverse of normal rules. Transitions have the greatest precedence. Next in order of highest to lowest priority are the important {{glossary("user agent")}} declarations, important user declarations, and important author declarations; in that order. Users can specify styles using browser preferences, operating system preferences, or browser extensions. Their important declarations take precedence over _author_, or _web developer_ written, important declarations. + +Within author styles, all important declarations within CSS layers take precedence over any important declarations declared outside of a layer, while all normal declarations within CSS layers have a lower priority than declarations declared outside of a layer. The declaration order matters. The first declared layer gets the lowest priority and the last declared layer gets the highest priority. However, the priority is reversed when the [`!important`](/en-US/docs/Web/CSS/important) flag is used. The `@layer` at-rule is used to create a cascade layer in one of three ways.