Une variable CSS c’est possible avec currentColor

css-variables

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 :

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.

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

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.

Répondre