Catégories
Astuces et Design

Premiers pas dans une disposition possible de maçonnerie CSS

Ce n'est pas au niveau de la demande comme, par exemple, les requêtes de conteneurs, mais être capable de faire des mises en page «maçonnerie» en CSS a été une grande demande pour les développeurs CSS depuis longtemps. La maçonnerie étant ce type de disposition où des éléments de taille inégale sont disposés en rangées irrégulières. Sorta comme un mur de briques typique tourné sur le côté.

La mise en page seule est déjà réalisable en CSS seul, mais avec une grande mise en garde: les éléments ne sont pas disposés en rangées, ils sont disposés en colonnes, ce qui est souvent une rupture pour les gens.

/* People usually don't want this */

1  4  6  8
2     7
3  5     9
/* They want this *.

1  2  3  4
5  6     7
8     9

Si vous voulez cette ligne irrégulière et cet ordre source horizontal, vous êtes en territoire JavaScript. Jusqu'à présent, c'est-à-dire que Firefox a déployé cela sous un indicateur de fonctionnalité dans Firefox Nightly, dans le cadre de la grille CSS.

Mats Palmgren:

Une implémentation de cette proposition est désormais disponible dans Firefox Nightly. Il est désactivé par défaut, vous devez donc le charger about:config et définir la préférence layout.css.grid-template-masonry-value.enabled à true pour l'activer (tapez "maçonnerie" dans la boîte de recherche sur cette page et il vous montrera cette préférence).

Jen Simmons a déjà créé quelques démos:

Est-ce vraiment une grille?

Un peu de recul de Rachel Andrew…

La grille n'est pas de la maçonnerie, car c'est une grille avec des lignes et des colonnes strictes. Si vous jetez un autre regard sur la mise en page créée par la maçonnerie, nous n'avons pas de lignes et de colonnes strictes. En règle générale, nous avons défini des lignes, mais les colonnes agissent plus comme une mise en page flexible ou Multicol. La principale différence entre la disposition que vous obtenez avec Multicol et une disposition de maçonnerie, c'est que dans Multicol, les éléments sont affichés par colonne. Généralement, dans une disposition de maçonnerie, vous voulez qu'ils soient affichés en ligne.

(…)

En parlant personnellement, je ne suis pas un grand fan de ce qui fait partie de la spécification Grid. C'est certainement convaincant à première vue, mais je pense qu'il s'agit d'un mode de mise en page relativement spécialisé et qu'il ne s'agit en fait pas du tout d'une grille. Cela s'apparente davantage à une disposition flexible qu'à une disposition en grille.

En plaçant cette méthode de mise en page dans la spécification Grid, je crains que nous nous attachions ensuite à prendre en charge la fonctionnalité de maçonnerie avec tout autre ajout à Grid.

Rien de tout cela n'est encore définitif, et il y a une discussion active du groupe de travail CSS à ce sujet.

Comme l'a dit Jen:

Il s'agit d'une mise en œuvre expérimentale – discutée comme possible Spécification CSS. Ce n'est PAS encore officiel, et cela va probablement changer. N'écrivez pas de billets de blog disant que c'est définitivement une chose. Ce n'est pas une chose. Pas encore. C’est une expérience. Un prototype. Si vous avez des idées, n'hésitez pas au CSSWG.

Houdini?

La dernière fois qu'il y avait eu des discussions sur la maçonnerie native, il était mêlé à l'idée que l'API CSS Layout, dans le cadre de Houdini, pouvait le faire. C'est une chose, comme vous pouvez le voir en ouvrant cette démo (repo) dans Chrome Canary.

Je ne suis pas totalement au courant de savoir si Houdini est destiné à être une chose afin que des idées comme celle-ci puissent être prototypées dans le navigateur et finalement retirées de Houdini, ou si les idées doivent simplement rester à Houdini, ou quoi.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *