Les couleurs relatives en CSS 🎨

Je ne sais pas vous, mais une chose qui m’a toujours frustré en tant que développeur front-end, c’est de devoir manipuler des couleurs.

Appliquer une opacité, ajuster une teinte ou modifier la luminosité d’une couleur selon un contexte donné a toujours été un exercice délicat. 😕

Pendant très longtemps, l’unique solution consistait à utiliser un préprocesseur tel que Sass, proposant diverses fonctions liées aux couleurs (darken(), lighten(), etc.).

Puis, l’arrivée des propriétés personnalisées a marqué un tournant majeur dans la conception des interfaces web.

Néanmoins, manipuler une couleur restait encore et toujours un processus laborieux… et ce, jusqu’à l’arrivée des couleurs relatives, introduites par le CSS Color Module Level 5 du W3C ! 🎉

Mais, avant d’entrer dans le vif du sujet, je vous propose de faire un bref retour en arrière sur la façon de manipuler une couleur, à une époque, pas si lointaine, afin de mieux appréhender les problématiques qui y sont liées. 🙄

Section intitulée le-monde-d-avantLe monde d’avant 🦖

Commençons par définir la couleur principale de notre thème à l’aide d’une propriété personnalisée, laquelle est définie globalement via la pseudo-classe :root :

Utilisons maintenant cette propriété personnalisée pour modifier la couleur de fond d’un bouton :

Jusqu’ici tout va bien ! 😇

Nous souhaitons désormais changer l’apparence de notre bouton lorsqu’il est survolé par un pointeur (état :hover).

Une bonne pratique est d’ajuster la luminosité de la couleur de...
[Courte citation de 8% de l'article original]