Il existe quatre valeurs applicables (en théorie) à n'importe quelle propriété CSS, ce sont les valeurs explicites par défaut. Avec Ire Aderinokun apprenez à les connaître et à les différencier.
Par Ire Aderinokun
Il existe quatre valeurs applicables (en théorie) à n’importe quelle propriété CSS. Ce sont les valeurs explicites par défaut — initial
, inherit
, unset
et revert
. Ces valeurs nous permettent de donner des valeurs par défaut avec nuance. Même si elles ne sont pas universellement supportées, il est utile de les connaître et de comprendre leurs différences.
Initial
La valeur initial
est la valeur par défaut de la propriété, telle qu’elle est définie par la spécification CSS officielle. Par exemple pour un élément <p>
, text-align
est left
et display
est inline
.
//HTML
<p style="text-align: initial;
display: initial;
background-color: rgba(255,219,58, 0.3)">
Hello, world!
</p>

Compatibilité navigateurs : La compatibilité est excellente, à l’exception d’IE et Opera Mini.
Inherit
La valeur inherit
représente la valeur prise par l’élément HTML parent immédiat pour la même propriété.
<div style="border: 2px solid plum;">
<div style="border: inherit; background-color: rgba(255,219,58, 0.3);">
Hello, world!
</div>
</div>

Si la propriété n’est pas explicitement définie pour l’élément parent, c’est le comportement de revert
qui se produira. CSS ne remontera pas dans l’arbre des éléments parents pour trouver une valeur explicitement définie pour cette propriété.
<div style="border: 2px solid plum;">
<div>
<div style="border: inherit; background-color: rgba(255,219,58, 0.3);">
Hello, world!
</div>
</div>
</div>

Unset
La valeur unset
est une sorte de mélange de initial
et inherit
.
Certaines propriétés, si elles ne sont pas définies explicitement, prendront pour valeur par défaut inherit
. Par exemple, si nous définissons la color
d’un élément, elle s’applique à tous les éléments enfants par défaut. Par contre, d’autres propriétés, telles que border
, n’héritent pas par défaut.
<div style="border: 2px solid plum; color: cornflowerblue;">
<div style="background-color: rgb(200, 200, 200)">
Hello, world
</div>
</div>

Compatibilité navigateurs : La compatibilité est bonne, à l’exception d’IE, iOS Safari et Opera Mini.
(publicité)
Revert
La valeur revert
, autrefois appelée default
, représente toute valeur que prendrait la propriété si aucune valeur ne lui était donnée.
Si aucune valeur n’est donnée à une propriété dans la feuille de style de l’auteur (les styles que nous appliquons en tant qu’auteurs), voici les étapes suivies par le navigateur pour trouver une valeur :
- Vérifier s’il existe des styles définis par l’utilisateur
- Si rien n’est trouvé, vérifier la feuille de style user agent (styles définis par le navigateur)
- Si rien n’est trouvé, appliquer l’équivalent de
unset
Par exemple, un style fréquemment ajouté aux éléments <div>
par les feuilles de style user agent est display: block;
même si la valeur initiale de display
est inline
. Voici ce qui se passe quand revert
est utilisé — et la comparaison avec initial
.
<div style="display: revert;
background-color: rgba(255,219,58, 0.3)">
Hello, world! (revert)
</div>
<div style="display: initial;
background-color: rgba(255,219,58, 0.3)">
Hello, world! (initial)
</div>

Compatibilité : à ce jour, seul Safari supporte revert
. Pour une information à jour à la lecture de cet article, consultez Can I Use.
Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.
Tous les articles sur CSS parus dans la Cascade.
Du même auteur, dans la Cascade :
Comment fonctionne CSS float
Comment fonctionne z-index
Contrôler le modèle de boîte
Cacher des éléments avec CSS
Styler les images non affichées
Sur :not et la spécificité
CSS Grid et le Saint Graal
CSS Initial, Inherit, Unset et Revert
Ressources complémentaires en français
Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design, par Laurent Denis
(publicité)
Traduit avec l’aimable autorisation de Bits of Code et de l’auteur.
Copyright Bits of Code © 2016.
Sur l’auteur : Ire Aderinokun est UI Designer et Front-End Developer à Lagos, au Nigéria. Son blog Bits of Code s’adresse aux développeurs autodidactes comme elle, elle y explore la théorie cachée derrière les morceaux de code que nous écrivons, afin de mieux comprendre le développement web. On peut la suivre sur Twitter ou sur Github.