Un CSS concis avec currentColor

Osvalda Valutis s'est intéressé de près à currentColor et présente ici quelques cas concrets d'utilisation étonnants illustrant la façon dont currentColor nous permet d'écrire un CSS plus concis et cohérent.

Par

currentColor existe depuis un bout de temps déjà mais j’en ai entendu parler pour la première fois en lisant l’article de Dudley Storey. La compatibilité navigateur étant excellente, j’ai eu envie de l’utiliser en production et j’ai été surpris de l’utilité de ce petit mot-clé : il m’aide à avoir un CSS plus concis et plus cohérent.

Avant d’entrer dans les exemples concrets, quelques lignes de théorie. Voici comment MDN décrit currentColor :

Le mot-clé currentColor représente la valeur calculée de la propriété color de l’élément. Il permet de faire hériter les propriétés de couleur par d'autres propriétés, ou par les propriétés d’un élément enfant qui n’héritent pas par défaut.

Il peut aussi être utilisé sur les propriétés qui héritent de la valeur calculée de la propriété color et est équivalent au mot-clé inherit sur ces éléments, s’ils existent.

SVG

Mon préféré. Prenons un exemple courant sur le web — un bouton avec une icône SVG et un titre. On les trouve sur mon site :

image

Bien sûr vous êtes un designer responsable et vous stylez les états :hover, :focus et :active pour une meilleure interaction avec l’utilisateur. Votre style ressemble généralement à ceci :

.button
{
    color: #000;
    border: 2px solid #000;
}
.button:hover,
.button:focus
{
    color: #333;
    border-color: #333;
}
.button:active
{
    color: #666;
    border-color: #666;
}
    .button svg
    {
        fill: #000;
    }
    .button:hover svg,
    .button:focus svg
    {
        fill: #333;
    }
    .button:active svg
    {
        fill: #666;
    }

Actuellement j’écris le code d’un site de e-commerce qui comporte plusieurs styles de boutons. De plus il y a des ancres qui ont un état :active en plus de ceux décrits ci-dessus. Et il y a bien d’autres cas d’utilisation avec SVG (barres d’outils, etc.) où le SVG doit avoir la couleur du texte. Le mot-clé currentColor nous aide à réduire de moitié le code :

/* insérez ceci dans votre fichier reset-normalize-defaults.css */

svg
{
    fill: currentColor;
}


/* maintenant vous n’avez plus à styler SVG et border-color */

.button
{
    color: #000;
    border: 2px solid currentColor;
}
.button:hover,
.button:focus
{
    color: #333;
}
.button:active
{
    color: #666;
}

Dégradés

On peut utiliser le mot-clé partout où la valeur attendue est une définition de couleur, y compris dans les dégradés. Dans mon précédent article, j'ai parlé de la façon dont j'avais mis en oeuvre ce soulignement tendance :

image

Le CSS habituel, comprenant les états interactifs :

a
{
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
    color: #000;
    background-image: -webkit-linear-gradient( left, #000 0%, #000 100% );
    background-image: linear-gradient( to right, #000 0%, #000 100% );
    background-repeat: repeat-x;
    background-position: 0 95%;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}
a:hover,
a:focus
{
    color: #333;
    background-image: -webkit-linear-gradient( left, #333 0%, #333 100% );
    background-image: linear-gradient( to right, #333 0%, #333 100% );
}
a:focus
{
    color: #666;
    background-image: -webkit-linear-gradient( left, #666 0%, #666 100% );
    background-image: linear-gradient( to right, #666 0%, #666 100% );
}
a:visited
{
    color: #999;
    background-image: -webkit-linear-gradient( left, #999 0%, #999 100% );
    background-image: linear-gradient( to right, #999 0%, #999 100% );
}

background-image a la responsabilité du soulignement et il a la même couleur que le texte. Le code a un aspect massif, et cependant on ne se limite pas en général à une couleur de lien. Personnellement, j’en utilise trois : la couleur générale, le gris et le blanc (lorsque le background est sombre). Ça signifie donc trois fois plus de code. C’est ici qu’intervient à nouveau la magie de currentColor :

a
{
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
    color: #000;
    background-image: -webkit-linear-gradient( left, currentColor 0%, currentColor 100% );
    background-image: linear-gradient( to right, currentColor 0%, currentColor 100% );
    background-repeat: repeat-x;
    background-position: 0 95%;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}
a:hover,
a:focus     { color: #333; }
a:focus     { color: #666; }
a:visited   { color: #999; }


/* grey links */

.grey-links a           { color: #999; }
.grey-links a:hover,
.grey-links a:focus     { color: #666; }
.grey-links a:active    { color: #333; }

Pseudo-éléments

Je suppose que vous êtes familiers des triangles CSS et que vous les utilisez régulièrement. Moi aussi, et bien souvent pour enrichir le style d’un lien, comme ceci :

image

Le pseudo-élément CSS ::after est ici un triangle. Grâce à currentColor, vous n’avez pas besoin de répéter les réglages de couleurs pour le triangle et ses états interactifs :

a           { color: #000; }
a:hover,
a:focus     { color: #333; }
a:active    { color: #666; }

    a::after
    {
        width: 0;
        height: 0;
        border: 0.5em solid transparent;
        border-right: none;
        content: '';
        display: inline-block;
    }
    a::after,
    a:hover::after,
    a:focus::after,
    a:active::after
    {
        border-left-color: currentColor;
    }

Ligne horizontale

Maintenant un cas différent. Il s’agit moins de raccourcir notre code que d’écrire un code efficace et maintenable. La ligne horizontale, <hr/>, sert à séparer différentes parties de contenu. La ligne ne devrait pas être dérangeante visuellement, mais subtile :

image

Dudley l’a déjà évoqué dans ses exemples, je ne fais que répéter en ajoutant une petite modification :

.post
{
    color: #000;
}
    .post hr
    {
        width: 33%;
        height: 0.313.em; /* 5px */
        border: none;
        background-color: currentColor;
        opacity: .2;
    }

Ce qui est malin ici c’est que si jamais vous modifiez la couleur du texte, vous n’aurez pas à changer la couleur de la ligne horizontale. L’automatisation est ce que nous cherchons dans notre travail. Plus nous écrivons de code, plus nous chérissons les solutions automatiques.

Avant qu’on se quitte...

Vous avez d’autres utilisations pratiques de currentColor ? Partagez-les !


Intéressé par CSS ? Sur la Cascade, retrouvez des articles et ressources.


Ressources complémentaires en français

La première variable CSS : currentColor, par Dudley Storey


original paru le dans le blog d'Osvaldas Valutis.

Sur l'auteur : est un web designer “qui pense en termes de code”. Il aime construire des sites de taille moyenne, du début à la fin. Par exemple, Easy Shine, Preidenta ou Readerrr. Il travaille aussi en équipe pour le site communautaire Versliukai.lt. Il partage ses connaissances et ses découvertes sur son blog et on peut le trouver sur Twitter, Google+, Dribbble et Instagram..

Traduit avec l'aimable autorisation de l'auteur.
Copyright Osvaldas Valutis © 2014.