N. B. : Cet article fait suite au premier article consacré aux layouts du web, qui traçait un historique des problématiques et leurs solutions. Cet article n’est pas un tutoriel technique sur Flexbox et Grid, plutôt d’une revue de leurs principes et cas d’utilisation.
Flexbox et Grid
La spécification « CSS3 », succédant à CSS2, est une spécification divisée en plusieurs modules. Chacun de ces modules peut être implémenté et supporté différemment par les navigateurs. Deux de ceux-ci ont changé radicalement la manière habituelle de disposer les éléments sur une page web :
- Le module « Flexible Box » (ou Flexbox), que plupart des navigateurs a commencé à supporter entre 2013 et 2014.
- Le module « Grid », que plupart des navigateurs a commencé à supporter en 2017.
Changement des besoins
Il n’est pas difficile de comprendre que les besoins du web changent lorsqu’on regarde l’évolution de la part de marché des navigateurs entre 2009 et 2019.
L’arrivée des smartphones a eu des conséquences drastiques sur la disposition idéale des pages web. On ne disposait soudainement que d’un écran beaucoup plus mince pour afficher le même contenu. Bien que la résolution des smartphones n’ait cessé d’augmenter, la taille physique de leur écran n’a pas suivi la même tendance. Il n’est donc plus possible d’afficher autant de contenu horizontalement sur un smartphone que sur bureau.
La spécification Flexbox permet de résoudre ce problème beaucoup plus facilement que jusqu’ici.
L’apport de Flexbox
La spécification Flexbox apporte une panoplie de fonctionnalités et d’outils qu’il est possible de combiner. La documentation de Mozilla explique :
Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l’espace disponible.
La disposition Flexbox est composée d’un conteneur et d’un ou plusieurs « items ». À l’inverse de la table, les éléments sont placés dans un seul axe dans le code (pas de distinction entre ligne et colonne). Les éléments se chargent eux-mêmes de se placer et de s’adapter. Par exemple, il suffit de spécifier la propriété flex‑wrap: wrap au container afin que les items se disposent en plusieurs lignes si nécessaire. Ceci facilite énormément la conception d’une page web pour un affichage mobile ayant une largeur limitée.
Il est possible de spécifier des propriétés par défaut à tous les éléments. Puis, chacun d’entre-eux peut ensuite re-définir son propre comportement. Parmi les fonctionnalités, on trouve des propriétés permettant de gérer facilement :
- L’alignement sur chaque axe
- L’espacement entre éléments
- Le « wrapping » des items (Décaler un élément à la ligne suivante si nécessaire)
- L’extension des éléments sur la place disponible
La combinaison de toutes ces fonctionnalités permet une énorme flexibilité au niveau de la disposition des éléments. Il est désormais possible de résoudre des problèmes auparavant fastidieux en deux ou trois instructions CSS intuitives. La disposition « Holy Grail » discutée dans la partie précédente est ici triviale à reproduire.
En résumé, le module Flexbox a considérablement facilité la conception de pages web pour l’affichage sur mobile. Il s’agit encore d’un outil extrêmement polyvalent, et l’une des méthodes préférées pour organiser du contenu sur une page aujourd’hui.
Limitations
Malgré tous les avantages de Flexbox précédemment cités, il reste tout de même certaines dispositions qu’il est difficile d’exprimer sous la forme de Flexbox. Par exemple, il est courant de vouloir aligner des éléments verticalement sur une page, selon des colonnes données. Beaucoup de frameworks CSS (tels que Bootstrap) proposent un système de grille, où l’espace horizontal de la page est divisé en colonnes (très souvent 12 colonnes). Cette méthodologie de placement des éléments permet de conserver l’alignement vertical de certains d’entre-eux lorsqu’on le désire.
Essayons de reproduire ce comportement de manière simple avec des Flexbox. Un problème survient si on essaie de diviser une page en plusieurs colonnes de largeur égale inconnue, séparées par des marges. Une approche intuitive pour laisser certains éléments occuper plusieurs colonnes serait de faire varier leur attribut flex‑grow. Cependant, on remarque très vite que des lignes contenant différentes compositions de colonnes ne sont pas alignées.
L’explication est très simple : Etant donné que l’on garde l’espace entre deux colonnes constant, le fait de « fusionner » deux colonnes enlève effectivement une taille de marge de la ligne. En effet, on peut compter sur l’illustration que la première ligne compte un total de 5 espaces blancs entre les colonnes. Tandis que sur la seconde, il n’y en a plus que 4. Le navigateur distribue donc cet espace supplémentaire pour agrandir les éléments, ce qui résulte en leur désalignement.
Cette partie du problème est remédiable en y appliquant une logique plus complexe avec l’addition de plusieurs attributs. Cependant, la leçon tirée est que malgré l’utilité de Flexbox, le module n’est pas non plus la panacée du web.
L’arrivée de Grid
Bien que l’on remarque que le principe d’aligner les éléments sur des colonnes soit implémenté sur certaines pages aussi tôt que 2011 (à l’aide de frameworks CSS comme mentionné précédemment), le standard permettant de reproduire un équivalent natif n’est supporté qu’aux environs de 2017 (avec, cependant, beaucoup de fonctionnalités supplémentaires).
Le module Grid permet de répondre à la demande d’organiser le contenu de sa page selon des colonnes, et dans des « cases ». On revient ici à un paradigme qui s’approche de l’utilisation initiale de la balise table. On place à nouveau chaque élément dans deux axes distincts ; horizontal et vertical. Cependant, la spécification Grid est cette fois évidemment adaptée au cas d’utilisation pour une page complète ; il ne s’agit plus d’un composant détourné de son utilisation de base comme l’était la table.
Plus complète, la Grid permet d’aligner efficacement des éléments indépendants sur une page. Une Grid comporte un nombre défini de lignes et de colonnes. Le principe est d’assigner une aire (Grid Area) à un élément, et celui-ci y sera confiné. N’importe quel rectangle formé par une ou plusieurs cellules de la Grid peut constituer une aire. Tout comme les composants individuels de Flexbox, chaque ligne et chaque colonne de la Grid peut définir sa propre taille et son comportement. Le tout prévoit également de l’espace (appelé Gap) entre les cellules.
Propriétés CSS
Le module Grid décrit plus d’une dizaine de nouvelles propriétés CSS plus ou moins complexes, afin de pouvoir spécifier tous les nouveaux comportements définis précédemment (et d’autres encore). Chacune a sa propre utilité et peut définir un ou plusieurs aspects du comportement de la Grid. Mais il en existe selon moi une qui est particulièrement intéressante, car très explicite et intuitive : La propriété grid-template. Au lieu de la décrire, voici un exemple de son utilisation :
Le code CSS correspond au résultat visuel que nous aurons sur la page ! Il est possible via cette seule propriété de définir la forme de la grille, ainsi que de spécifier directement la taille de chaque track, et le contenu qui elle occupera. Quel gain de clarté ! Il y a tout de même certains comportement qu’il n’est pas possible de définir ici et une ou deux lignes additionnelles peuvent être nécessaires, mais selon moi la lecture de cette propriété est suffisante pour comprendre l’agencement du contenu. Une fois cette propriété définie, on assigne un élément de contenu à l’emplacement en utilisant son nom avec la propriété grid-area. Par exemple, grid-area: avatar; assignera l’élément concerné à la place occupée par avatar dans la Grid.
Responsiveness
À présent que nous réutilisons un paradigme où nous plaçons un élément sur deux axes (comme avec table), la question de l’affichage sur des écrans de plus petite dimension revient naturellement. Cependant, ce cas-ci présente deux différences significatives :
- L’agencement des parties est défini en CSS, non pas en HTML
- Les navigateurs supportent la spécification CSS 3 Media Queries, qui permet d’appliquer un CSS différent en fonction de la taille du navigateur
En listant ces deux points, la solution devient évidente. Comme nous définissons à présent le positionnement en CSS, il suffit de renseigner une disposition différente par fourchette de taille différente que nous voulons supporter. Nous avons donc toute liberté de modifier complètement la disposition de notre grille en fonction de l’écran.
Support et adoption
Les possibilités que propose la Grid sont intéressantes, mais son adoption n’est encore certainement pas la plus répandue. Les navigateurs ne la supportent complètement et sans bugs que depuis mi-2017. Malgré cela, sa popularité s’accélère tout de même.
On remarque donc que Grid répond à un besoin présent depuis longtemps, et son utilisation commence à grimper. Que peut-on donc vouloir de plus ? La suite dans la prochaine partie !