Règle @layer CSS

Définition et utilisation

CSS @layer Les règles peuvent être utilisées pour contrôler l'ordre d'évaluation des styles des couches en cascade (cascade layers) de CSS.

Cela est réalisé en définissant d'abord une couche et en enveloppant le jeu de règles à évaluer dans cet ordre spécifique dans cette couche.

@layer Peuvent être définies avec ou sans nom.

Sans nom @layer AppeléesCouches anonymes。Les couches anonymes sont évaluées suivant l'ordre des déclarations (voir l'exemple ci-dessous). Elles suivent l'ordre par défaut de la cascade (du haut vers le bas).

Avec un nom unique @layer AppeléesCouches nommées。En utilisant des couches nommées, nous pouvons spécifier l'ordre exact de la cascade requis (voir l'exemple ci-dessous). L'ordre va de le moins spécifique au plus spécifique, de gauche à droite.

Exemple

Exemple 1

Utiliser des couches anonymes (elles suivront l'ordre par défaut de la cascade - du haut vers le bas) :

/* Couche 1 */
@layer {
  body {
    background: pink;
  }
}
/* Couche 2 */
@layer {
  body {
    background: lightblue; /* La dernière couche s'applique */
  }
}

Essayer par vous-même

Exemple 2

Utiliser des couches nommées (et spécifier l'ordre exact de la cascade requis) :

/* Spécifier l'ordre exact de la cascade */
@layer bgblue, bgpink;
/* Couche 1 */
@layer bgpink {
  body {
    background: pink; /* Application */
  }
}
/* Couche 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Essayer par vous-même

Grammaire CSS

@layer name {
  déclarations CSS;
}

Valeur de l'attribut

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette règle @.