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.
Résumé des caractéristiques de la valeur initial
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 les 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.
#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 trois valeurs initial, revert et unset sont bien reconnues par les navigateurs.
Il reste des problèmes avec la valeur revert-layer, mais c'est en fait la prise en charge des couches de cascades
qui laisse encore à désirer (2024).
initialrevertrevert-layerunsetNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que initial.
Les spécifications CSS éditées par le W3C sont organisées en modules. initial fait partie du module CSS - Cascade et héritage (CSS Cascading and Inheritance). Les définitions suivantes sont également décrites dans ce même module.