Aller au contenu

La donnée graphique avec HTML et CSS

Par Gaël Poupard

Mini-conf (30 mn) :
Salle :
Auditorium René Descartes
Service(s) :
LSF
Vélotypie
Langue :
Français
  • Diaporama
  • Le sujet

    Baliser des données de manière sémantique est déjà un défi en HTML. De nouveaux éléments comme <meter> ou <progress> permettent d’aller (un peu) plus loin ; et <dl> ou <table> sont destinés à cet effet.

    En revanche quand il s’agit de leur représentation visuelle, on se retrouve vite coincé entre <canvas> et <svg>, le tout avec sa tartine de JavaScript. L’accessibilité en est assez compliquée, et il est presque impossible de s’en sortir sans la librairire-JS-qui-fait-tout.

    Pourtant les CSS contemporains — tout comme ceux du futur — proposent de nouvelles manières d’aborder la représentation visuelle des données :

    • les display grid / flex, qui permettent un agencement proportionnel des éléments,
    • les variables CSS pour passer des paramètres d’ordre visuel (et un jour, attr() avec un typage faible dans toutes les propriétés),
    • les nouveautés en terme de gestion d’image comme clip-path et ses formes basiques — miam les polygon() — ou encore les conic-gradient(),
    • le tout saupoudré de motifs en SVG / gradient et un peu d’animations pour améliorer l’accessibilité visuelle.

    On peut d’ores-et-déjà faire des choses simples mais efficaces sans JavaScript, et qui demeurent accessibles grâce à une bonne sémantique. Qui en veut ?

    Présenté par