La première variable CSS : currentColor

En attendant l'arrivée des variables CSS, Dudley Storey nous rappelle l'existence de currentColor et nous en montre quelques applications qui peuvent nous aider à renforcer la cohérence de notre design.

Par

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 :

image

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éprocesseurs, 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. Cette astuce est proposée par Fabrice Weinberg et développée sur CodePen.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


Ressources complémentaires en français

Un CSS concis avec currentColor, par Osvaldas Valutis


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu'il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright DudleyStorey © 2014.
Crédit photo header : Mr. dale