CSS Initial, Inherit, Unset et Revert

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

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>  
La div intérieure hérite du style de la div parent

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>  
La div enfant n’hérite pas de son grand-parent

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>  
La propriété color est héritée, mais pas la propriété border

Compatibilité navigateurs : La compatibilité est bonne, à l’exception d’IE, iOS Safari et Opera Mini.

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 :

  1. Vérifier s’il existe des styles définis par l’utilisateur
  2. Si rien n’est trouvé, vérifier la feuille de style user agent (styles définis par le navigateur)
  3. 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>  
la div revert est affichée en mode bloc, la div initial est affichée en mode inline

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


Article original paru le 19 avril 2016 dans Bits of Code.

Sur l’auteur : 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.

Traduit avec l’aimable autorisation de Bits of Code et de l’auteur.
Copyright Bits of Code © 2016.