Les variables CSS, c’est nouveau pour vous? Pourtant la variable currentColor ! existe depuis quelques années et commence déjà a être prise en compte par un bon nombre de navigateurs moderne.
Cette fonctionnalité CSS possède des propriétés assez intéressantes. Voyons comment nous pouvons l’utiliser.
Le concept de l’héritage
Une des caractéristiques les moins connues de CSS est que si omettez de mettre un border-color dans votre déclaration qui comporte également une color alors la bordure héritera par défaut de la couleur du texte :
|
1 |
p { color: red; border-bottom: 4px solid; } |
En utilisant currentColor, nous pouvons étendre cette fonctionnalité aux éléments enfants.
Mise en pratique
Vous auriez remarquer, on utilise pas vraiment une variable, mais plutôt on joue sur le concept d’héritage afin de forcer le navigateur à hériter la propriété color de l’élément parent tout simplement.
|
1 2 3 4 5 |
p { color: #333; } p a { text-decoration: none; color: #333; border-bottom: 1px dashed #333; } |
Dans cet exemple, tout marche nickel, mais je pense que vous avez vu le problème : nous indiquons que les liens doivent avoir la même couleur que le reste du texte, ainsi que la bordure, nous répétons les même valeur de couleur.
Si un jour nous décidions de changer notre design, il nous faudrait remplacer une à une toutes ces valeurs.
C’est là qu’entre en scène notre variable currentColor
|
1 2 3 4 5 6 |
p { color: #333; } p a { text-decoration: none; color: currentcolor; border-bottom: 1px dashed currentcolor; } |
L’utilisation de currentColor dans vos feuilles de styles est un préambule vers la géneralisation des préprocesseurs (SASS, LESS) dans le web à venir, les variables joueront un rôle primordiale dans le développement front-end.