@layer

Exemple interactif

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

<p class="alert">Attention aux zombies</p>

Syntaxe

/* déclaration de règle @ */
@layer nom-couche;
@layer nom-couche, nom-couche, nom-couche;

/* règle @ en bloc */
@layer {regles}
@layer nom-couche {regles}

où :

nom-couche

Est le nom de la couche de cascade.

regles

Est l'ensemble de règle CSS de la couche de cascade.

Description

Les règles à l'intérieur d'une couche de cascade sont évaluées ensemble, ce qui donne plus de contrôle sur la cascade aux développeur·euse·s web. Les styles qui ne sont pas définis dans une couche l'emportent toujours sur les styles déclarés dans des couches nommées ou anonymes.

Le schéma suivant montre les priorités des couches selon l'ordre de déclaration : 1, 2, ..., N.

Comme indiqué dans le schéma ci-dessus, les déclarations importantes (celles avec le drapeau !important) ont priorité sur les déclarations normales (celles sans le drapeau !important). L'ordre de précédence entre les règles importantes est l'inverse de celui des règles normales. Les transitions ont la plus grande précédence. Viennent ensuite, de la plus haute à la plus basse priorité : les déclarations importantes de l'agent utilisateur, les déclarations importantes de l'utilisateur·rice, puis les déclarations importantes de l'auteur·ice (développeur·euse web), dans cet ordre. Les utilisateur·ice·s peuvent spécifier des styles via les préférences du navigateur, du système d'exploitation ou des extensions. Leurs déclarations importantes l'emportent sur celles écrites par l'auteur·ice ou le·la développeur·euse.

Dans les styles de l'auteur·ice, toutes les déclarations importantes à l'intérieur des couches CSS l'emportent sur les déclarations importantes en dehors d'une couche, tandis que toutes les déclarations normales à l'intérieur des couches CSS ont une priorité inférieure à celles déclarées en dehors d'une couche. L'ordre de déclaration est important : la première couche déclarée a la priorité la plus faible et la dernière la plus forte. Cependant, la priorité est inversée lorsque le drapeau !important est utilisé.

La règle @ @layer est utilisée pour créer une couche de cascade de trois façons.

La première consiste à utiliser une règle @ @layer en bloc pour créer une couche de cascade nommée, avec les règles CSS de cette couche à l'intérieur, comme ceci :

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

La seconde méthode consiste à créer une couche de cascade nommée sans lui affecter de styles. Il peut s'agir d'une seule couche :

@layer utilities;

Comme il peut s'agir de plusieurs couches :

@layer theme, layout, utilities;

Comme l'ordre initial dans lequel sont déclarés les couches indique la précédence entre les couches, il est utile d'en déclarer plusieurs ainsi. Comme pour les déclarations, c'est la dernière couche listée qui l'emporte si les mêmes déclarations sont trouvées dans plusieurs couches. Ainsi, dans l'exemple précédent, si une règle était à la fois trouvée dans theme et dans utilities, ce serait celle de utilities qui l'emporterait et qui s'appliquerait.

Une règle présente dans utilities s'appliquerait même si sa spécificité est inférieure à celle de la règle dans theme. En effet, dès lors que l'ordre des couches a été établi, la spécificité et l'ordre d'apparence sont ignorés. Cela permet la création de sélecteurs CSS plus simples, car il n'est pas nécessaire de s'assurer qu'un sélecteur a une spécificité suffisamment élevée pour l'emporter sur les autres règles, il suffit de s'assurer qu'il apparaît dans une couche qui arrive après.

La troisième façon consiste à créer une couche de cascade sans nom, par exemple :

@layer {
  p {
    margin-block: 1rem;
  }
}

Cela crée une couche de cascade anonyme. Cette couche fonctionne de façon analogue aux couches nommées. Toutefois, il n'est pas possible d'y affecter des règles après la déclaration. L'ordre de précédence des couches anonymes est l'ordre dans lequel les couches sont déclarées, qu'elles soient nommées ou non. La précédence d'une couche anonyme a une précédence inférieure aux styles déclarés en dehors d'une couche.

Une autre façon pour créer une couche de cascade consiste à utiliser @import. Dans ce cas, les règles associées proviendraient de la feuille de style importée.

@import "theme.css" layer(utilities);

Couches imbriquées

Les couches peuvent être imbriquées, on peut par exemple avoir :

@layer framework {
  @layer layout {
  }
}

Pour ajouter des règles à la couche layout située à l'intérieur de framework, on concaténera les deux noms avec un point ..

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

Syntaxe formelle

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

Exemples

Exemple simple

Dans l'exemple suivant, deux règles CSS sont créées. Une pour les éléments <p> en dehors de toute couche et une pour ceux qui sont situés dans une couche intitulée type pour .box p.

Sans couche, le sélecteur .box p aurait la plus haute spécificité et le texte Coucou le monde ! serait alors affiché en vert. La couche type arrivant avant la couche anonyme pour gérer le contenu qui n'est pas affecté à une couche, le texte sera en violet.

On fera attention à l'ordre, bien que le style qui n'est pas affecté à une couche soit déclaré en premier, il est bien appliqué après les styles des couches.

HTML

<div class="box">
  <p>Coucou le monde !</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Résultat

Affecter des règles à des couches existantes

Dans l'exemple qui suit, on crée deux couches sans leur affecter de règle puis les règles CSS sont appliquées aux deux couches. La couche base définit des valeurs pour les propriétés color, border, font-size, et padding. La couche special définit une couleur différente. special arrivant en dernier lors de la définition des couches, c'est la couleur qu'elle fournit qui est utilisée et le texte est affiché avec la couleur rebeccapurple. Toutes les autres règles de base continuent de s'appliquer.

HTML

<div class="item">
  Je m'affiche avec <code>color: rebeccapurple</code> car la couche
  <code>special</code> arrive après <code>base</code> dans les déclarations. Ma
  bordure verte, la taille du texte et le remplissage viennent de la couche
  <code>base</code>.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Introduction à la cascade CSS
• Apprendre : Gérer les conflits
• Apprendre : Les couches de cascade
• L'avenir du CSS : les couches de cascade ^(angl.) sur bram.us (2021)