Parfois on a besoin d'afficher des icônes ou des petits motifs qu'on importe assez vite en image voir via des fonts d'icônes. Les images c'est bien mais ça impose le chargement d'un fichier supplémentaire, et pour des éléments très simples c'est un peu embêtant. Il existe toujours la technique de l'image inline en base64, mais ça reste peu pratique parce que ces images sont très peu maniables et si on doit modifier l'image il faut plusieurs étapes de conversion autour de la modification.
Dans le même temps la technique des fonts d'icônes n'est pas trop mal au sens où on va changer un seul et unique fichier avec un grand nombre d'icône mais le souci c'est qu'on utilisera sans doute pas la moitié des icônes qui seront chargées pour rien. Par contre on est bien face à des images relativement faciles à customiser pour des choses basiques.
Pour un mini projet, j'avais besoin d'afficher des dés très simples : les six figures d'un dé à 6 faces et une bordure. Les solutions que je décris plus tôt ne m'allaient pas trop. Alors que j'ai commencé à creuser la piste du CSS et des grid et je suis franchement assez satisfait du résultat 😎
L'idée est assez simple : une div pour contenir les points du dé (pip), on indique role="img" de sorte que les lecteurs d'écran puissent comprendre qu'on est face à une image et lisent directement le alt (ce dernier servant aussi pour le positionnement des points comme ça on ne risque pas de l'oublier) et on ajoute une div avec la class pip pour chaque point qu'on aura sur le dé. Ensuite j'ai joué avec les CSS grid pour le positionnement des points, le code est un peu long, mais il se comprend très bien.
En ajoutant un peu de CSS, on pourrait sans souci imaginer pouvoir mettre 6 points tout le temps et cacher ceux dont on a pas besoin le reste du temps. Mais je n'avais pas besoin de ça dans mon projet, donc je n'ai pas creusé plus.
Pour voir le dé dans un projet, c'est par ici : https://kuroidoruido.github.io/yahtzee/lit/
Crédit photo : https://pixabay.com/photos/cube-roll-the-dice-play-sweepstakes-2031511/