revert

Le mot-clé revert permet de remonter la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).

Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie all.

La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé revert :

• Si revert est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.
• Si revert est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, revert entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.
• Si revert est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à unset

Le mot-clé revert fonctionne comme unset pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.

revert n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).

<section>
  <p>Voici une section !</p>

  <aside class="widget">
    <p>Et un petit widget.</p>
  </aside>
</section>

section p {
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
}

.widget p {
  all: revert;
}

h3 {
  font-weight: normal;
  color: blue;
}

<h3 style="font-weight: unset; color: unset;">
  Ceci aura toujours font-weight: normal mais color: black
</h3>
<p>Juste un peu de texte</p>
<h3 style="font-weight: revert; color: revert;">
  Ceci devrait avoir font-weight: bold (la valeur originale) et color: black
</h3>
<p>Juste un peu de texte</p>

h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

<h3>Un style spécifique</h3>
<p>Juste un peu de texte</p>
<h3 style="all: revert">
  Retour aux réglages par défaut pour toutes les propriétés
</h3>
<p>Juste un peu de texte</p>

section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

<section>
  <h3>Ce texte sera vert foncé</h3>
  <p>Ce texte sera rouge.</p>
  Ce texte sera aussi vert.
</section>
<section class="with-revert">
  <h3>Ce texte sera noir</h3>
  <p>Ce texte sera rouge.</p>
  Ce texte sera aussi noir.
</section>