Inherit - Valeur CSS

inherit

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

Description rapide
Donne à une propriété la même valeur que celle de l'élément parent.
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)
Statut du document: REC (recommandation)

La valeur inherit.

Lorsqu'une propriété est fixée à la valeur inherit, elle prend la même valeur que la propriété équivalente de l'élément parent. L'élément parent étant celui qui, dans l'arborescence du DOM, est au dessus de l'élément considéré.

La valeur inherit est surtout utilisée pour réactiver le mécanisme d'héritage lorsqu'une propriété a été auparavant fixée à une valeur différente. Elle peut aussi activer l'héritage sur une propriété qui n'est pas héritée par défaut.

Voir aussi les valeurs unset, initial, revert et revert-layer.

La valeur inherit et les valeurs relatives.

Les valeurs relatives sont des valeurs calculées à partir d'une autre valeur. L'exemple le plus courant est le pourcentage.

En principe, la valeur inherit récupère la valeur calculée de l'élément parent. Le calcul n'est donc par refait sur l'élément lui-même.
Prenons l'exemple d'une taille de police définie à 2em sur l'élément parent. Ce qui donne admettons 24 pixels. Les éléments enfants hériteront de la valeur calculée (24 pixels) et non pas de 2em, ce qui donnerait finalement à une taille de police de 48 pixels sur les enfants.

Il y a cependant des exceptions à cette règle. Les propriétés de dimensions (width, margin, etc.) héritent de la valeur définie ce qui provoque donc, sur les enfants, un nouveau calcul pour déterminer la valeur.

Exemple :

La marge gauche de ce bloc parent est fixée à 25%
La marge gauche de cet élément enfant est fixée sur inherit. On voit clairement que le calcul a été refait puisque la marge gauche n'a pas la même valeur que celle de l'élément parent.

Exemples et cas pratiques.

Exemple 1.

Forcer le mécanisme d'héritage sur une propriété qui par défaut n'hérite pas sa valeur. C'est le cas de background-color.

#exemple1
Bloc parent.
#exemple1a
La couleur de l'arrière-plan de ce bloc n'a pas été modifiée. Sa valeur initiale est transparent.
#exemple1b
La couleur de l'arrière-plan de ce bloc est fixée à inherit. La couleur est donc la même que celle du bloc parent.

Prise en charge par les navigateurs (compatibilité).

La valeur inherit est très bien reconnue par tous les navigateurs actuels.

1
Valeur
inherit
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Historique de la propriété inherit.

La valeur inherit est également citée dans les modules CSS Values and Units niveaux 3 et 4.

Voir aussi, à propos des valeurs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété inherit fait 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.
initial
Redonne à une propriété sa valeur initiale.
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.