Les valeurs initial, revert, revert-layer et unset.

Remarque : ces quatre valeurs peuvent être appliquées à toutes les propriétés, y compris à la propriété all.

initial
revert
revert-layer
unset

Résumé des caractéristiques de la valeur initial

Description rapide
Redonne à une propriété sa valeur initiale.
Statut
Standard
Module W3C
Module CSS - Cascade et héritage
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

Présentation générale de ces quatre valeurs.

La valeur initial.

La valeur initial redonne à une propriété sa valeur initiale, c'est à dire avant application de toutes les feuilles de styles, y compris celle du navigateur.

Les valeurs initiales sont définies dans la norme du W3C. En principe, elles ne dépendent donc pas du navigateur.
Les valeurs initiales ne sont jamais inherit.

La valeur revert.

La valeur revert redonne à une propriété la valeur définie par la feuille de styles interne du navigateur. revert annule donc l'effet de toutes les règles CSS définies par le développeur sur cette propriété.

revert peut restituer la valeur inherit contrairement à initial.

La valeur revert-layer.

revert-layer annule les modifications apportées à la valeur de la propriété dans cette même couche de cascade. Les modifications apportées dans une autre couche de cascade restent valides.

Pour une explication plus détaillée sur les couches de cascade, reportez-vous à ce tutoriel sur couches de cascade.

La valeur unset.

La valeur unset remet la propriété à la valeur initiale, sauf si la feuille de styles du navigateur définit la valeur inherit. Dans ce cas unset récupère la valeur inherit.

Comparaison du comportement des valeurs initial, revert et unset.

Le comportement de ces trois valeurs peut aussi se schématiser par le tableau suivant :

initial revert unset
Valeurs définies par
la feuille de styles du développeur.
Valeurs définies par
la feuille de styles du navigateur.		 inherit Valeur
Valeurs initiales
(définies par le W3C).		 initial initial initial initial

Exemples.

Exemple 1.

L'exemple illustre le comportement des trois valeurs initial, revert et unset sur une propriété définie à la valeur inherit par le navigateur. Nous avons choisi la propriété font-size.

Les textes de ce bloc ont une taille fixée à small.

Pas de changement de la taille des caractères.
Voici un lien dont la propriété font-size n'a pas été changée : sa valeur est donc définie par la feuille de styles interne du navigateur, soit pour cette propriété, la valeur inherit. Les caractères du lien ont effectivement la même taille que ceux du parent (le paragraphe dans lequel le lien est inclus).

Application de la valeur initial.
Ce lien a sa propriété font-size définie à la valeur initial. On voit que les caractères du lien n'ont pas récupéré la taille du texte du paragraphe. En effet, la valeur initiale de font-size est medium.

Application de la valeur revert.
La propriété font-size de ce lien a été fixée à la valeur revert. La valeur définie par la feuille de styles du navigateur est donc restituée, soit, pour cette propriété, il s'agit de la valeur inherit.

Application de la valeur unset.
La propriété font-size de ce lien a été fixée à la valeur unset. Puisque la feuille de styles du navigateur définit la valeur inherit pour cette propriété, c'est cette valeur qui est récupérée par unset.

Exemple 2.

Ce deuxième exemple illustre le comportement des trois valeurs initial, revert et unset sur une propriété que le navigateur ne défini pas à la valeur inherit. Nous avons choisi la propriété background-color.

Pour la propriété background-color on voit que les trois valeurs prédéfinies renvoient finalement la même valeur : la valeur initiale qui est transparent.

La couleur d'arrière-plan de ce bloc parent a été fixée à la valeur #ffff1c.
Remarque : le débordement des blocs internes permet de distinguer la couleur de fond transparente de la couleur de fond du parent.

Application de la valeur initial.
La valeur initial a été appliquée à la couleur de l'arrière-plan.

Application de la valeur revert.
La valeur revert a été appliquée à la propriété background-color. On devrait donc récupérer la valeur définie par le navigateur dans sa feuille de styles interne, mais le navigateur ne définit rien : on reprend donc la valeur initiale.

Application de la valeur unset.
La valeur unset a été appliquée à la couleur d'arrière-plan. Dans la mesure où le navigateur n'a pas forcé cette valeur à inherit, c'est la valeur initiale qui est récupérée, soit transparent.

Prise en charge par les navigateurs (compatibilité).

Les quatre valeurs initial, revert, unset et revert-layer sont bien reconnues par les navigateurs.

1
Valeur
initial
2
Valeur
revert
3
Valeur
revert-layer
4
Valeur
unset
Estimation de la prise en charge globale.
98%
96%
95%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse
Caniuse

Historique des valeurs initial.

Voir aussi, à propos des valeurs.

Les spécifications CSS éditées par le W3C sont organisées en modules. Les valeurs initial, revert, revert-layer et unset font partie du module CSS Cascading and Inheritance.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

all
Initialisation de toutes les propriétés.

Directives :

@import
Importation d'une feuille de styles.
@layer
Définit les couches de cascade (layer) pour faciliter la gestion des priorités entre les règles CSS.

Valeurs:

!important
Rend une règle prioritaire sur toutes les autres.
inherit
Donne à une propriété la même valeur que celle de l'élément parent.
revert
Donne à une propriété la valeur définie par le navigateur.
revert-layer
Rétablit la valeur d'une propriété à la valeur qu'elle avait à la couche précédente.
unset
Donne à une propriété la valeur qu'elle aurait eu si aucun style ne l'avait changée.