Mot-clé CSS revert-rule

revert-rule, revert-layer et revert

Les mots-clés revert-rule, revert-layer et revert annulent chacun la cascade, mais à différents niveaux de granularité :

• revert annule toutes les déclarations de l'origine de style actuelle, revenant à l'origine précédente (par exemple, des styles de l'auteur·ice aux styles de l'agent utilisateur).
• revert-layer annule toutes les déclarations de la couche de cascade actuelle, revenant à la couche précédente dans la même origine.
• revert-rule annule uniquement les déclarations de la règle de style actuelle. Les autres règles dans la même couche de cascade s'appliquent toujours.

Cela rend revert-rule utile pour ignorer conditionnellement des déclarations spécifiques au sein d'une règle tout en respectant les déclarations des autres règles dans la même couche.

Exemples

Revenir à la règle précédente

Dans cet exemple, deux règles ciblent le même élément. La deuxième règle utilise revert-rule sur la propriété color, ce qui fait que la cascade détermine la valeur comme si la règle p.special n'était pas présente, revenant à la valeur établie par la première règle.

HTML

<p class="special">Ce paragraphe a un style spécial.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Votre navigateur ne prend pas encore en charge le mot-clé revert-rule.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: blue;
  font-weight: bold;
}

p.special {
  color: revert-rule;
  border: 1px solid currentcolor;
}

Résultat

Le texte du paragraphe est bleu grâce à la règle p, car color: revert-rule fait que la déclaration color dans p.special est ignorée. Les déclarations font-weight et border ne sont pas affectées.

Revenir à partir d'un attribut de style

Lorsque revert-rule est utilisé dans un attribut de style, il fait en sorte que la cascade se comporte comme si l'attribut de style n'était pas présent. Cela fonctionne parce que l'attribut de style est traité comme sa propre règle de style.

HTML

<p style="color: revert-rule">
  Ce texte utilise la couleur définie dans la feuille de style.
</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Votre navigateur ne prend pas encore en charge le mot-clé revert-rule.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: green;
}

Résultat

Le texte du paragraphe est vert grâce à la règle p, car revert-rule fait que la déclaration color dans l'attribut de style est ignorée. La règle p prend effet.

Chaînage de plusieurs valeurs revert-rule

Si plusieurs règles utilisent revert-rule pour la même propriété, la cascade ignore chacune d'elles à son tour, revenant aux règles précédentes jusqu'à ce qu'elle trouve une valeur concrète.

HTML

<p class="a b">Ce texte est stylé par une chaîne de valeurs revert-rule.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Votre navigateur ne prend pas encore en charge le mot-clé revert-rule.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: red;
}
p.a {
  color: revert-rule;
}
p.b {
  color: revert-rule;
}

Résultat

Les règles p.b et p.a sont ignorées par revert-rule. La cascade retombe sur la règle p, donc le texte est rouge.

Spécifications

Compatibilité des navigateurs

Voir aussi

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