Mot-clé CSS revert

Exemples

revert et unset

Bien que revert et unset soient semblables, ils diffèrent pour certaines propriétés de certains éléments.

Ainsi, dans l'exemple ci-dessous, nous définissons une valeur personnalisée pour font-weight, puis essayons de la revert et unset en ligne dans le document HTML. Le mot-clé revert rétablit le texte en gras, car c'est la valeur par défaut pour les en-têtes dans la plupart des navigateurs. Le mot-clé unset conserve le texte normal, car en tant que propriété héritée, le font-weight hériterait alors de sa valeur du corps.

HTML

<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 style="font-weight: unset; color: unset;">
  Ceci a toujours font-weight: normal mais color: black
</h3>
<p>Juste un peu de texte</p>

CSS

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

Résultat

Remonter all

La restauration de toutes les valeurs s'avère utile lorsque vous avez apporté plusieurs modifications de style et que vous souhaitez revenir aux valeurs par défaut du navigateur. Ainsi, dans l'exemple ci-dessus, au lieu de rétablir les propriétés font-weight et color séparément, vous pouvez simplement les réinitialiser toutes en même temps — en appliquant le mot-clé revert à all.

CSS

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

HTML

<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>

Résultat

Revenir sur une propriété du parent

La restauration supprime effectivement la valeur de l'élément que vous sélectionnez à l'aide d'une règle, et cela ne s'applique qu'à cet élément. Pour illustrer cela, nous allons attribuer la couleur verte à une section et la couleur rouge à un paragraphe.

HTML

<main>
  <section>
    <h3>Ce texte est vert foncé</h3>
    <p>Ce texte est rouge.</p>
    Ce texte est aussi vert.
  </section>
  <section class="with-revert">
    <h3>Ce texte est bleu acier</h3>
    <p>Ce texte est rouge.</p>
    Ce texte est aussi bleu acier.
  </section>
</main>

CSS

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}

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

Résultat

Remarquez comment le paragraphe est toujours rouge même si une propriété color pour la section a été rétablie. De plus, notez que l'en-tête et le nœud de texte simple sont tous deux steelblue. Le résultat de la restauration fait comme si section { color: darkgreen; } n'existait pas pour la section avec color: revert appliqué.

De plus, si ni l'agent utilisateur ni l'utilisateur·ice ne remplacent les valeurs de couleur de <h3> ou <section>, alors la couleur steelblue est héritée de <main>, car la propriété color est une propriété héritée.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utilisez le mot-clé initial pour définir une propriété à sa valeur initiale.
• Utilisez le mot-clé inherit pour que la propriété d'un élément soit la même que celle de son parent.
• Utilisez le mot-clé revert-layer pour réinitialiser une propriété à la valeur établie dans une couche de cascade précédente.
• Utilisez le mot-clé revert-rule pour réinitialiser une propriété à la valeur d'une règle de style correspondante antérieure.
• Utilisez le mot-clé unset pour définir une propriété à sa valeur héritée si elle est héritée ou à sa valeur initiale sinon.
• La propriété all permet de réinitialiser toutes les propriétés à leur état initial, hérité, rétabli ou non défini.