Depuis plusieurs années, j’utilise la même palette de cinq couleurs :
- au centre, un violet, bien sûr ;
- deux teintes adjacentes, un rose et un bleu ;
- et plus rarement les deux autres couleurs de la triade, un vert et un orange.
Pour mieux comprendre cette palette que j’ai adoptée sans l’avoir créée, et la faire évoluer, j’ai eu l’idée d’une grille dont la taille des cellules diminuerait à mesure que l’on s’éloigne du violet central. Les colonnes représenteraient les cinq couleurs de la palette, éclaircies ou assombries de 5 % par rang, jusqu’à plus ou moins 25 %. La teinte la plus lumineuse que l’on peut obtenir avec chaque couleur avant le blanc pur, et la couleur la plus sombre que l’on peut obtenir avant le noir pur, encadreraient le tout.
Ce « projet » est l’occasion parfaite de prendre en main la spécification CSS Grid, en adhérant aux principes de l’« amélioration progressive ». Tous les navigateurs peuvent afficher une première grille, qui n’est rien d’autre qu’un empilement de cellules flottantes occupant 20 % de la largeur disponible et jamais moins de 40px de hauteur.
.color {
float: left;
width: 20%;
}
.color .swatch {
height: 100%;
min-height: 40px;
min-width: 75px;
}
Cette grille, qui n’en est donc pas une, ne remplit pas tout l’écran. Ce problème est réglé avec CSS Flexbox, qui permet d’allouer tout l’espace disponible dans les navigateurs plus récents.
.site-main {
display: flex;
flex-flow: row wrap;
height: 100vh;
}Mais toutes les cellules ont la même taille : il faudrait ajouter beaucoup de code pour faire varier leurs dimensions comme je l’entends. CSS Grid à la rescousse ! Quelques lignes de code suffisent à afficher une grille très dynamique dans les navigateurs les plus récents.
Cette amélioration passe par une feature query, qui permet d’invalider certaines déclarations sans rien changer ni dans les anciens navigateurs, qui ignoreront tout simplement ce bloc qu’ils ne comprennent pas, ni dans les navigateurs relativement récents, ceux qui comprennent ce bloc mais ne prennent pas en charge CSS Grid.
@supports (display: grid) {
.site-main {
display: grid;
grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
grid-template-rows: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 8fr 5fr 3fr 2fr 1fr 1fr;
}
.color {
width: auto;
}
}Dans les navigateurs très récents, le dimensionnement explicite des colonnes est invalidé, et CSS Grid prend la main. Lorsque le viewport est minuscule, la grille est contrainte par les dimensions minimales des cellules. À mesure que le viewport s’agrandit, les cellules s’agrandissent au rythme de la suite de Fibonacci. Ainsi, tous les navigateurs et toutes les tailles d’écran sont pris en compte, d’une manière ou d’une autre.
Cet exemple est tout simple, mais me permet de mettre en œuvre un grand nombre de concepts, d’adopter un raisonnement qui sera utile aux plus complexes de mes développements. Il me permet surtout de redécouvrir une palette de couleurs que je croyais bien connaître :
- le violet est clairement plus sombre que les autres couleurs. Il me faudra redéfinir la teinte de base pour obtenir une gamme plus étendue dans cette couleur que j’affectionne tant.
- les teintes les plus sombres du bleu (céruléum) et du rose (magenta), ainsi que les teintes les plus claires du vert (chartreuse) et de l’orange (saumon), m’inspirent tout particulièrement.
- par un heureux hasard que la théorie des couleurs doit sans doute expliquer, le centre de la palette me fournit un blanc neutre, et les extrémités me fournissent deux noirs profonds, qui remplaceront les teintes ad hoc que j’utilisais jusqu’ici.
Cet exercice fait aussi apparaître des illusions optiques qui m’amusent énormément :
- alors que les couleurs sont appliquées uniformément, elles apparaissent sous la forme d’un dégradé. La partie supérieure de chaque cellule semble plus foncée, parce qu’elle suit immédiatement une couleur plus claire, et la partie inférieure de chaque cellule semble plus claire, parce qu’elle précède immédiatement une couleur plus foncée. Il suffit d’ajouter une bordure aux cellules pour faire disparaître cette illusion.
- le défilement rapide de la grille donne l’impression que la luminosité de l’écran diminue, parce que j’agis de facto sur la luminosité des couleurs, sans changer la saturation de leurs composantes. Il me faudra d’ailleurs répéter l’expérience en faisant varier la saturation pour obtenir une palette de gris.
Pour étudier cette grille :