Les variables CSS se fraient lentement leur chemin vers une mise en oeuvre prochaine dans les navigateurs. Une variable existe pourtant depuis des années : currentColor ! Cette fonctionnalité CSS a une bonne compatibilité navigateurs et quelques applications pratiques intéressantes. Voyons comment nous pouvons l’utiliser.

Une règle héritée

Une des caractéristiques les moins connues de CSS est que si vous réglez votre color dans une déclaration qui comporte également une border et que vous omettez de spécifier la couleur de cette dernière, la bordure héritera par défaut de la couleur du texte :

h1 { color: hsl(0,0%,44%); padding: 1rem; border-bottom: 4px solid; }

Le résultat :

C’est une astuce sympa : si vous changez la couleur de votre titre, celle du soulignement sera automatiquement modifiée. La même chose s’applique à outline et box-shadow.

En utilisant currentColor, nous pouvons étendre cette fonctionnalité aux éléments enfants.

Un exemple pratique de currentColor

Nous avons dépassé depuis longtemps l’époque des liens bleus sur les pages web. Depuis une dizaine d’années, la pratique courante est de donner aux liens la même couleur que le texte dans lequel ils se trouvent. Bien sûr, il nous faut mettre en évidence le fait qu’il s’agit d'un lien. Une de mes techniques préférées est celle-ci :

p { color: #333; }
p a {
  text-decoration: none; color: #333;
  font-weight: bolder;
  display: inline-block;
  padding-bottom: .5rem;
  border-bottom: 1px dashed #333;
}

Certes, ça marche, 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, et nous utilisons encore une fois cette couleur pour la bordure inférieure. Nous répétons trois fois la même valeur de couleur. Si un jour nous décidions de changer notre design, il nous faudrait laborieusement passer en revue notre feuille de styles et appliquer les modifications une à une (👉🏿 NdT : sauf si vous utilisiez Sass bien sûr, puisque vous auriez déjà utilisé des variables).

Procédons plutôt de la sorte : nous allons définir la couleur du texte et laisser les autres propriétés à l’intérieur du lien hériter de la couleur via currentColor (👉🏿 NdT : CSS n'est pas sensible à l'utilisation de majuscules, on peut écrire currentcolor comme ci-dessous).

p { color: #333; }
p a {
  text-decoration: none;
  color: currentcolor;
  font-weight: bolder;
  display: inline-block;
  padding-bottom: .5rem;
  border-bottom: 1px dashed currentcolor;
}

Il y a certes d’autres façons de parvenir au même résultat, en particulier en utilisant inherit, mais un exemple comme celui-ci par contre est impossible sans currentColor :

body { color: #f0f; }
hr { height: 10px; background: currentcolor; }

On peut utiliser currentColor de tas de façons inattendues, par exemple avec les dégradés et les SVG. Ainsi, pour avoir des sprites SVG en ligne qui s’affichent plutôt comme des icônes fontes, on pourrait utiliser :

svg { fill: currentcolor; }

De cette manière, chaque icône SVG prendra la color de son élément parent.

Ce qui serait vraiment génial ce serait de pouvoir faire quelque chose comme color: (currentColor) 10% lighter mais ce genre de manipulation n'est pas possible dans le standard CSS, elles relèvent encore du domaine des préprocesseur, en tout cas jusqu'à présent.

Compatibilité

La compatibilité est excellente. Tous les navigateurs modernes et leurs équivalents mobiles, y compris IE9+, supportent le mot-clé.

Conclusion

L'utilisation de currentColor dans vos feuilles de styles est une bonne façon de renforcer les bonnes pratiques DRY, la cohérence de votre design, et éventuellement de vous préparer à migrer vers les préprocesseurs. Dans le web à venir, les variables joueront un plus grand rôle dans le développement et le design front-end.

👉🏿 _NdT : Une autre utilisation possible de currentColor, que je viens de découvrir grâce à la série de vidéos de Chris Coyier sur SVG, concerne la résolution de certains problèmes spécifiques d'application de style CSS sur les SVG.