Mot-clé CSS revert-layer

revert-layer et revert

Le mot-clé revert-layer permet de revenir aux styles définis dans les couches précédentes de la cascade dans l'origine de l'auteur·ice. Le mot-clé revert, en comparaison, permet de revenir aux styles appliqués dans l'origine de l'auteur·ice vers ceux définis dans l'origine de l'utilisateur·ice ou l'origine de l'agent utilisateur.

Le mot-clé revert-layer est idéalement destiné à être appliqué aux propriétés à l'intérieur d'une couche de la cascade. Cependant, s'il est appliqué à des propriétés en dehors d'une couche de la cascade, il annule les valeurs des propriétés pour revenir à celles définies par les indices de présentation (tels que les attributs width et height ou l'élément <s> en HTML), en revenant par défaut aux valeurs établies par la feuille de style de l'agent utilisateur ou les styles de l'utilisateur·ice. Contrairement au mot-clé revert, qui considère les indices de présentation comme faisant partie de l'origine de l'auteur·ice et les annule également, le mot-clé revert-layer ignore les indices de présentation en dehors de la couche de la cascade, donc il ne les annule pas.

Exemples

Comportement par défaut des couches de la cascade

Dans l'exemple ci-dessous, deux couches de la cascade sont définies dans le CSS, base et special. Par défaut, les règles de la couche special remplacent les règles concurrentes de la couche base, car special est listée après base dans la déclaration @layer.

HTML

<p>Ce exemple contient une liste.</p>

<ul>
  <li class="item feature">Premier élément</li>
  <li class="item">Deuxième élément</li>
  <li class="item">Troisième élément</li>
</ul>

CSS

@layer base, special;

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

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

Résultat

Tous les éléments HTML <li> correspondent à la règle item dans la couche special et sont rouges. Il s'agit du comportement par défaut des couches de la cascade, où les règles de la couche special prennent le pas sur les règles de la couche base.

Revenir au style dans la couche de la cascade précédente

Examinons comment le mot-clé revert-layer modifie le comportement par défaut des couches de la cascade. Dans cet exemple, la couche special contient une règle supplémentaire feature ciblant le premier élément <li>. La propriété color dans cette règle est définie sur revert-layer.

HTML

<p>Ce exemple contient une liste.</p>

<ul>
  <li class="item feature">Premier élément</li>
  <li class="item">Deuxième élément</li>
  <li class="item">Troisième élément</li>
</ul>

CSS

@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

Résultat

Avec color défini sur revert-layer, la valeur de la propriété color revient à la valeur de la règle feature correspondante dans la couche précédente base, et donc « Premier élément » est maintenant vert.

Revenir au style dans l'origine précédente

Cet exemple montre le comportement du mot-clé revert-layer lorsqu'il n'y a pas de couche de cascade à laquelle revenir et qu'il n'y a pas de règle CSS correspondante dans la couche actuelle pour hériter de la valeur de la propriété.

HTML

<p>Ce exemple contient une liste.</p>

<ul>
  <li class="item feature">Premier élément</li>
  <li class="item">Deuxième élément</li>
  <li class="item">Troisième élément</li>
</ul>

CSS

@layer base {
  .item {
    color: revert-layer;
  }
}

Résultat

Le style de tous les éléments <li> revient aux valeurs par défaut dans l'origine de l'agent utilisateur.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le mot-clé initial
• Le mot-clé inherit
• Le mot-clé revert
• Le mot-clé revert-rule
• Le mot-clé unset
• La propriété all
• Le module de cascade et d'héritage CSS