Résumé

  • Le premier projet public Grid Layout du W3C, en avril 2011, citait les tables, JavaScript et les éléments flottants mesurés avec soin parmi les expédients fragiles pour placer une application web.
  • Le texte de recommandation candidate de décembre 2017 décrivait conteneur, pistes, lignes, zones nommées, tailles souples et placement automatique, tandis que le sens du document restait dans le HTML.

La table à manger avait l’air fatiguée. On l’avait engagée pour disposer des données en lignes et colonnes; la voilà sommée de porter un en-tête, une navigation, des panneaux, un pied de page et toute la décoration. Les flottants tenaient les angles. JavaScript arrivait avec son mètre. Une fenêtre plus étroite, et l’édifice semblait avoir été monté sur des roulettes de tailles différentes.

Le premier projet de travail public Grid Layout du W3C, daté du 7 avril 2011, part précisément de ces pratiques. Pour construire des interfaces de plus en plus complexes, des auteurs utilisaient des tables, du script ou des mesures soigneuses sur des éléments flottants. Lorsque l’espace disponible changeait, le montage pouvait se casser. Certains fixaient alors la largeur, au prix d’un écran mal utilisé ici et d’un contenu trop serré là.

Le projet proposait de diviser l’espace de présentation en lignes et colonnes, puis de placer les éléments par rapport à des lignes de grille ou à des cellules. Sa distinction essentielle portait sur la structure du contenu. Une table de données dit quelque chose de ses lignes et de ses cellules; une grille de mise en page organise visuellement des parties qui gardent leur sens dans le document. Une barre latérale n’a pas besoin de devenir la cellule d’un tableau pour se tenir à côté d’un article.

Le premier document expérimentait encore son vocabulaire. Ses exemples utilisaient grid-columns et grid-rows, noms différents de la syntaxe devenue familière ensuite. Il serait imprudent de recopier la maquette comme si elle était le permis de construire final. Ce qui se poursuit d’un texte à l’autre, c’est la possibilité de définir des pistes, des lignes, des positions et des dimensions qui répondent à la place réellement disponible.

La recommandation candidate du W3C du 14 décembre 2017 décrit un conteneur de grille et ses éléments. L’auteur définit des pistes horizontales et verticales, nomme des lignes ou des zones, place certaines pièces explicitement et laisse d’autres trouver leur place automatiquement. Les pistes peuvent avoir des tailles fixes ou souples; l’unité fr partage l’espace libre entre celles qui doivent s’étendre. Le plan n’est plus une liste de coordonnées clouées à un seul écran.

Le placement automatique compte quand une collection grandit. Une page de cartes peut recevoir un nouvel élément sans qu’un éditeur doive lui attribuer à la main une adresse ligne-colonne. Le navigateur suit les règles de circulation et crée, au besoin, des pistes implicites. L’auteur dessine l’immeuble; le navigateur place les chaises suivant ce plan. Une treizième carte cesse d’être une urgence pour le contremaître.

Grid pense en deux dimensions. Un en-tête peut couvrir plusieurs colonnes, un menu occuper une piste et des panneaux s’aligner sous chacun. Les rangées et les colonnes sont coordonnées ensemble. Il existe d’autres outils pour d’autres circulations; ici, le sujet est le plan d’ensemble d’une page. La pauvre table peut retourner à son métier de table.

Cette liberté visuelle demande de respecter l’ordre de lecture. CSS peut afficher une section ailleurs que dans l’ordre où elle apparaît dans le document. Les méthodes de navigation et de lecture continuent pourtant à suivre la source. Le texte de 2017 traite cet écart avec sérieux. Déplacer une carte dans la vitrine ne change pas le sens d’une phrase dans le livre; le parcours doit rester cohérent avant et après la décoration.

L’historique de publication du W3C pour CSS Grid Layout Level 1 commence avec le projet d’avril 2011, puis montre les étapes de recommandation candidate en 2016 et 2017. Ces dates jalonnent les documents. On y voit un besoin précis devenir un modèle de conteneur, de pistes, de tailles et de placement.

Le lecteur ne réclame pas le plan de l’architecte. Il remarque seulement quand la navigation vole toute la largeur d’un téléphone ou quand les panneaux se chevauchent. Grid a permis à la page de décrire ses pièces et au navigateur de les résoudre selon l’écran présent. La table, elle, peut enfin porter une tasse de café.