Feuille de style de café : le café comme couleur

Ils disent que les développeurs ne pourraient travailler que pour le café. Je ne pense pas que ce soit vrai (mais peut-être pas trop loin non plus). Le dessin animé de cette semaine mélangera donc deux de mes trucs préférés : le café et le CSS. Et en particulier, je me concentrerai sur les couleurs CSS et sur la façon dont différents types de cafés peuvent être représentés de la même manière que les couleurs CSS.

Nous connaissons tous RVB, Hex (également RVB) et HSL (qui, chose amusante, est également RVB). Et de nouveaux formats de couleurs sont apparus dans la norme CSS : L*a*b*, LCH, CMJN, HWB, OKLCH… Tant de gens m'ont demandé : « Pourquoi avons-nous besoin d'autant de formats de couleurs en CSS ? » Et c'est une juste question à laquelle je vais essayer de répondre à l'aide du dessin animé d'aujourd'hui .

Et je le ferai à l'aide d'une fonction de couleur CSS existante : HWB . Bien que HWB signifie Hue - W hiteness- B Lackness, j'ai modifié (juste) un peu la signification des lettres pour répondre à mon objectif :

• H = eau chaude = eau ( duh )
• W = Blanc = lait (moussé, moussé, cuit à la vapeur, etc.)
• B = Noir = café (citant Homer Simpson : la cause et la solution de tous les problèmes de la vie.)

Bien que j'aime l'idée, elle est limitée : et si on voulait un moka ? Les mochas contiennent du chocolat et hwb()n'ont aucun moyen de représenter le chocolat. Ce n'est que de l'eau, du lait et du café. Avec ces trois ingrédients de base, nous ne pouvons créer que les cafés sur l'infographie et quelques autres (cortado, café bombón ou galão, pour n'en nommer que quelques-uns). Pourtant, il nous manque une tonne de plus : café irlandais, expresso romano, marochino, etc., et nous ne pouvons pas les créer avec juste de l'eau, du lait et du café.

Même pour ceux du dessin animé, ma hwb()fonction nouvellement créée ne suffit pas. Par exemple, vérifiez le cappuccino : c'est 66 % de lait et 33 % de café. Il semble trompeur qu'il ait la même composition qu'un latte, mais ce ne sont pas les mêmes : dans un cappuccino, le lait est à moitié cuit à la vapeur et à moitié moussé.

Ce serait mieux si nous avions une autre façon d'exprimer ces détails. Et c'est aussi ce qui se passe avec les couleurs CSS ! Nous utilisons le RVB depuis longtemps, mais le RVB est limité. Le CSS Color Module Level 4 a introduit de nouvelles façons d'écrire les couleurs qui modernisent le web et offrent un monde de possibilités : Lab, LCH, OKLCH, CMJN, la color()fonction… et ces espaces colorimétriques offrent plus d'options que le RVB standard.

Dans le cas d'un moka, il nous manque le chocolat (ce qui n'est pas une option dans HWB)… alors pourquoi ne pas utiliser LCH à la place ?

• L = Légèreté/Leche/Lait/Latte = Lait
• C = Chocolat
• H = Café chaud

Et la même chose arrive aux couleurs CSS : certaines fonctions de couleur vous permettront de créer des couleurs plus vives que d'autres, et certaines seront plus faciles pour l'ordinateur ou plus simples pour les humains. Un certain chevauchement est attendu, et c'est tout à fait normal. Choisissez le meilleur format de couleur pour les besoins de votre projet et profitez-en. C'est une période passionnante pour jouer avec les couleurs CSS.

Si vous voulez en savoir plus sur les fonctions de couleur, consultez directement le CSS Color Module 4 ( et le niveau 5 pour de nouvelles fonctions de couleur !). C'est étonnamment simple. Vous pouvez également consulter un article que j'ai publié il y a quelques années … mais sachez qu'il est un peu dépassé car la norme a changé continuellement depuis que je l'ai écrit.

Liens

• Lien permanent :https://comicss.art/?id=87
• Image:https://comicss.art/comics/87/coffee-as-a-css-color.png
• Code source:https://comicss.art/comics/87/coffee-as-a-css-color.html