Inherit - Valeur CSS
Résumé des caractéristiques de la valeur inherit
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 et revert.
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 :
25%
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.
#exemple1Bloc parent.
#exemple1aLa couleur de l'arrière-plan de ce bloc n'a pas été modifiée. Sa valeur initiale est
transparent.
#exemple1bLa 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.
inheritNavigateurs 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
Historique de la propriété inherit.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Introduction de la valeurinheritpermettant de forcer l'héritage de la valeur du parent.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Valeurs et unités - Niveau 3
Aucun changement concernant la valeurinherit.13 Juillet 2001Document de travail.
28 Août 2012Candidat à la recommandation. -
Module CSS - Valeurs et unités - Niveau 4
Aucun changement concernant la valeurinherit.14 Août 2018Document de travail. -
Module CSS - Cascade et héritage - Niveau 3
Aucun changement concernant la valeurinherit.13 Juillet 2001Document de travail.03 Octobre 2013Candidat à la recommandation.22 Décembre 2020Proposé à la recommandation.11 Février 2021Recommandation. -
Module CSS - Cascade et héritage - Niveau 4
Aucun changement concernant la valeurinherit.21 Avril 2015Document de travail.14 Janvier 2016Candidat à la recommandation. -
Module CSS - Cascade et héritage - Niveau 5
Aucun changement concernant la valeurinherit.19 Janvier 2021Document de travail.13 Janvier 2022Candidat à la recommandation.
Voir aussi, dans le même module de standardisation que inherit.
Les spécifications CSS éditées par le W3C sont organisées en modules. inherit 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.