Dans la gestion de la cascade CSS, il existe deux mots-clés qui peuvent s'avérer bien pratique. Ce sont les mots-clés inherit et initial.
Le mot-clé inherit
Lorsque que la valeur spécifiée pour une propriété CSS est inherit, la valeur calculée de cet élément est identique à la valeur calculée de son parent. Cela permet de forcer l'héritage. Par exemple, prenons ce code HTML:
<p>Hello CSS!</p>Et le CSS suivant:
p{
background: tomato;
}
p::after{
background: inherit;
}Dans ce cas, la couleur d'arrière-plan (qui ne s'hérite pas par défaut) du pseudo-élément sera la même que celle de l'élément <p>. Il est par exemple possible de créer une infobulle où la couleur de la petite flèche est toujours la même que la couleur de la bulle elle-même. Cela offre un gain de temps dans la mise à jour: une seule modification requise.
Mais il existe pleins d'autres cas où ce mot-clé est très pratique (width et height d'un élément en absolute par exemple). Il existe même une utilisation détournée de inherit qui permet d'animer les pseudo-éléments.
Le mot-clé inherit est très bien supporté dans les navigateurs (depuis IE8).
Le mot-clé initial en CSS3
Lorsque la valeur d'une propriété CSS est initial, la valeur utilisée sera la valeur initiale de la propriété telle qu'elle est définie dans la spécification CSS. C'est une sorte de retour à un «état normal», non hérité. Elle peut s'avérer pratique lorsque l'on souhaite annuler l'effet d'héritage tout en réinitialisant à la valeur par défaut:
- lorsque l'on ne se souvient plus de cette valeur (e.g. C'est quoi déjà la valeur par défaut de
white-space?auto,normal,none,0?initialest le mot-clé passe-partout) - lorsque cette valeur est dynamique (e.g.
text-alignvautleften modeltr, et vautrighten mode rtl.text-align: initialvautleftourighten fonction du contexte. Par ailleurs, les valeursstartetendcouvrent justement ce cas là).
Cas d'utilisation: Annuler la propagation des tailles de police
Lorsque l'on utilise des unités de polices relatives (avec l'unité em par exemple), la gestion de la cascade est toujours délicate. Par exemple, sur un navigateur configuré par défaut à 16px, si l'élément <html> est défini à 0.9em (14.4px) et les <p> à 1em, les <p> seront affichés en fait à 0.9em (14.4px). Il faudrait utiliser 1.111111em pour que les <p> soit proche de 16px. Le mot-clé initial peut alors devenir utile dès lors que l'imbrication devient complexe.
Cas simple d'utilisation possible
html{
font-size: .9em; /* 14.4px */
}
p{
font-size: initial; /* 16px */
}Vous l'aurez compris, son utilisation est limitée. De plus, le support de initial est malheureusement plus faible, Opera et Internet Explorer ne la reconnaissent tout simplement pas.
Ce mot-clé deviendra certainement plus utile lorsque la propriété all arrivera dans les navigateurs. La propriété all permettant de redéfinir l'ensemble des propriétés CSS et ainsi stopper la cascade de manière globale.
Pour plus d'infos, lire l'article détaillé sur le sujet de la cascade CSS avancée.
Ressources supplémentaires
Pour référence, voici quelques liens intéressants: