Web - Dessine-moi un graphique ! (en CSS)
28 janvier 2024
Conférence présentée par Gaël Poupard
Pendant son talk, Gaël nous montre comment réaliser un graphique en… CSS !
Il rappelle qu’un graphique de données est :
un ensemble de clés, associées à une ou plusieurs valeurs, disposées sur une échelle, mises en forme afin d’en faciliter la compréhension.
Pour décrire un ensemble de clés et valeurs en HTML, il y a deux choix :
- les listes de définitions :
<dl>,<dt>,<dd>, - les tableaux de données
Il fait ensuite un petit flashback en 2018 et dit que maintenant on peut améliorer tout ça.
Ils nous montre alors comment il crée un camembert interractif.
Dans son code, il utilise les @layer en CSS qui sont une nouveauté bien pratique. Je ne les ai pas encore testés, mais il faudra ! En CSS, font-feature-settings lui permet de passer toute la typo du tableau en “style numérique” : font-feature-settings: “tnum”;.
La légende du graphique est un tableau qui utilise display: flex au lieu du display: table natif : cela permet de garder une bonne sémantique et d’être accessible.
Visuellement, le caption est positionné sous le tableau mais reste au dessus sémantiquement, à l’aide de cette ligne de CSS sur le table : caption-side: bottom.
Dans le CSS, il indique également au navigateur de ne pas afficher les cellules vides : empty-cells: hide.
Dans la palette, les couleurs sont automatiques, en hsl. En effet, le hsl permet de de calculer les couleurs avec des variables : luminosité, saturation. Avec prefers-color-scheme, on pourra aussi gérer les préférences d’affichage (darkmode par défaut par exemple).
Il prévoit aussi les textures en plus des couleurs, afin que les personnes atteintes de daltonisme puissent avoir le même niveau d’information.
Gaël nous montre ensuite comment il construit son camembert, à l’aide de clip-path: polygon… et les maths ! En effet, il faut placer les points, avec de la logique. En ce qui concerne les propriétés logiques, il rappelle que maintenant on a block-start et block-end au lieu de top et bottom.
Il utilise également les custom-properties. Il se sert du sens de lecture pour positionner les légendes (right to left par exemple).
Il joue sur les rotations, même en 3D pour les animations au survol… et encore plein d’autres trucs cools !
Je vous invite à aller consulter son slide du DevFest, ainsi que son Github du projet !