Utiliser les variables CSS pour vos projets multicolores

Les variables CSS ?! Kézako ?

Les variables CSS ou CSS-custom dans la langue de Shakespeare ajoutent tout un nouveau panel de possibilités pour vos styles mais apporte aussi une grosse économie de code CSS dans certains cas de figure. Qui plus est, la plupart des navigateurs actuels supportent les CSS-custom.

Sans parler d'IE, Edge ne le supporte pas à l'heure ou j'écris cet article, mais cela ne devrait pas tarder. Il faudra cependant penser à déclarer un fallback pour les navigateurs ne les supportant pas.

La syntaxe

La syntaxe est plutôt simple : on commence par deux middlescore "--"puis le nom de notre variable (ci-dessous "brand-color") pour enfin lui attribuer une valeur.

div{
    --brand-color: #ff0000;
}

Pour appliquer la valeur de cette variable à une de nos propriétés CSS, on procède de cette manière (sans oublier le fallback) :

a{
    color: blue; // Fallback
    color: var(--brand-color);
}
Dans cet exemple, nos liens seront en rouge sur les navigateurs supportant les CSS-custom, en bleu pour les autres.

Un comportement en cascade

On retrouve avec nos CSS-custom un comportement dit "en cascade". Si tu utilises l'unité em ça doit te parler : la variable aura la valeur définie par son plus proche parent. Petit exemple :

:root{
	--product-font-size: 14px;
}

.product{
	font-size: 14px; // fallback
	font-size: var(--product-font-size);
}

.product.promo{
	--product-font-size: 26px; // on redéfinit la variable
}

Ainsi, tous nos produits en promos seront visibles à coup sûr !

A savoir, dans l'exemple ci-dessus :root est une pseudo-classe qui équivaut ici à html{}.

Exemple pour un projet multicolores

Voilà où je veux en venir : travaillant dans une agence web, j'ai déjà rencontré des projets multicolores. Imaginons un site avec plusieurs thématiques, chacune associée à une couleur se répercutant sur les boutons, les liens, le pied de page, la barre de navigation, les interstitielles... ça peut vite alourdir notre fichier CSS par la redondance de code.

Bien sûr, on pouvait éviter cette redondance via un fichier CSS dynamique avec un peu de PHP dedans, ou gérer tout ça avec du JavaScript. Mais maintenant, nous avons le moyen de simplifier tout ça ! Ô joie !

Dans l'exemple ci-dessus, j'utilise du JavaScript pour appliquer le changement de couleur. Jquery ne sachant pas le faire semble t'il, je passe alors par du JavaScript pur.

À l'inverse, voici ce que pourrait être notre code CSS sans ces variables :

Pour aller plus loin

Oui, car ce n'est là qu'un aperçu de ce qu'on peut faire avec ce nouveau joujou ! On peut combiner ces variables avec la fonction calc() ou encore la pseudo classe :lang() :

:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}

a[href^="http"]::after {content: " (" var(--external-link) ")"}

Tout un monde s'ouvre à nous, et j'ai hâte de voir ce que la communauté va en faire ! Et pour plus d'infos, tu peux aussi consulter la documentation officielle.

À vos claviers !

Tags :

Tu as aimé ? Alors partage cet article avec tes amis :) 1

Permaliens