Avec tout le battage médiatique entourant les technologies CSS Grid et Flexbox, une autre méthode de mise en page est souvent négligée. Dans cet article, je veux considérer une mise en page multi-colonnes - souvent appelée simplement «Multicol» ou «Colonnes CSS». Vous découvrirez à quelles tâches il convient et quelles nuances doivent être prises en compte lors de son utilisation.
Que sont les multicolonnes?
L'idée principale des multicolonnes est que vous pouvez prendre un fragment du contenu et le placer dans plusieurs colonnes, comme dans un journal. Vous faites cela avec une ou deux propriétés. La propriété
column-count définit le nombre de colonnes dans lesquelles vous souhaitez diviser le contenu. La propriété
column-width définit la largeur idéale, permettant au navigateur de déterminer le nombre de colonnes.
Peu importe les éléments à l'intérieur du bloc que vous transformez en conteneur à plusieurs colonnes, tous les éléments restent dans le flux normal, mais sont divisés en colonnes. Cela rend les colonnes CSS contrairement aux autres méthodes de mise en page que nous avons aujourd'hui dans les navigateurs. Flexbox et Grid, par exemple, prennent des éléments enfants du conteneur, puis ces éléments participent à la disposition flex ou grid. Dans le cas des colonnes CSS, vous avez toujours un flux régulier, mais pas à l'intérieur de la colonne elle-même.
Dans l'exemple ci-dessous, j'utilise la
column-width de
column-width pour créer des colonnes d'au moins 14em de large. Les colonnes CSS déterminent le nombre de colonnes d'une largeur de 14em qui peuvent tenir dans le conteneur, puis alloue l'espace restant entre elles. Les colonnes auront une largeur d'au moins 14em, sauf dans une situation où une seule colonne est placée, auquel cas elle peut devenir plus étroite. Les colonnes CSS étaient la première fois que nous rencontrions un comportement similaire en CSS, créant des colonnes qui étaient réactives par défaut. Il n'est pas nécessaire d'ajouter des expressions multimédias et de modifier le nombre de colonnes à différents points de contrôle, à la place, nous spécifions la largeur optimale et le navigateur fonctionnera avec.
Style de colonne
Les blocs de colonnes créés à l'aide des propriétés de colonnes CSS ne peuvent pas être sélectionnés pour le style. Vous ne pouvez pas les sélectionner à l'aide de JavaScript ou styliser un seul bloc pour lui donner une couleur d'arrière-plan ou personnaliser le remplissage ou la marge. Tous les blocs d'enceintes auront la même taille. La seule chose que vous pouvez faire est d'ajouter une ligne de séparation entre les colonnes à l'aide de la propriété de
column-rule , qui fonctionne comme une bordure. Vous pouvez également mettre en retrait entre les colonnes à l'aide de la propriété
column-gap , qui a une valeur par défaut de 1em, mais vous pouvez la remplacer par toute autre unité de longueur valide
Il s'agit de la fonctionnalité de base des colonnes CSS. Vous pouvez prendre une partie du contenu et le diviser en colonnes. Le contenu remplira les colonnes, les créant dans une direction linéaire. Vous pouvez contrôler l'écart entre les colonnes et ajouter une ligne de séparation en spécifiant les mêmes valeurs que bordure. Jusqu'à présent, tout se passe bien, et tout ce qui précède est très bien pris en charge dans les navigateurs et pendant longtemps, ce qui rend cette spécification très sûre pour une utilisation en termes de compatibilité descendante.
Certaines fonctionnalités de la fonctionnalité Colonnes CSS et certains problèmes potentiels doivent être pris en compte lors de l'utilisation d'une disposition de colonnes sur le Web.
Couverture des haut-parleurs
Parfois, vous devrez peut-être diviser du contenu en colonnes, mais ensuite placer un élément en travers, couvrant des blocs de colonnes. Pour ce faire, appliquez la propriété
column-span au descendant du conteneur de colonne.
Dans l'exemple ci-dessous, j'ai fait l'élément
<blockquote> s'étendre sur les colonnes. Notez que lorsque vous faites cela, le contenu est divisé en un ensemble de champs au-dessus de cet élément, puis il démarre un nouvel ensemble de colonnes en dessous. Le contenu ne saute pas sur l'élément englobant.
Actuellement, la propriété column-span fonctionne par défaut dans tous les navigateurs sauf Firefox. En elle, il est toujours en cours de développement et caché derrière le drapeau.N'oubliez pas que dans la spécification actuelle, la valeur de la propriété
column-span ne peut être que
all ou
none . Vous ne pouvez pas couvrir uniquement certaines colonnes, mais vous pouvez obtenir un tel résultat en combinant la disposition des colonnes avec d'autres méthodes de composition. Dans l'exemple suivant, j'ai un conteneur Grid avec deux colonnes. La colonne de gauche est large de 2fr et la colonne de droite est large de 1fr. Dans la colonne de gauche, j'ai enveloppé l'article dans un conteneur de colonnes avec deux colonnes qui ont également un élément englobant.
À droite, le contenu qui se trouve dans la deuxième colonne de la grille. En jouant avec différents types de méthodes de mise en page à notre disposition, nous pouvons déterminer exactement celle qui convient le mieux dans une situation particulière - n'ayez pas peur de les combiner.
Contrôle de transfert de contenu
Si le conteneur de colonnes contient des en-têtes, vous souhaiterez probablement éviter les situations dans lesquelles ils se cassent et une partie de l'en-tête ou du texte sous l'en-tête est transférée à la colonne suivante. Si vous avez des images avec des légendes, il serait préférable que l'image et la légende restent intactes, sans espace entre les colonnes. Particulièrement pour de telles situations, CSS possède des propriétés pour contrôler le transfert de contenu.
En divisant le contenu en colonnes, vous faites ce qu'on appelle la fragmentation. Il en va de même si vous partagez votre contenu entre des pages, par exemple lorsque vous créez des styles pour l'impression. Par conséquent, les colonnes sont plus proches du média paginé que des autres méthodes de balisage sur le Web. Pour cette raison, pendant plusieurs années, la façon de contrôler les wrappers dans le contenu était d'utiliser les propriétés de
page-break- qui faisaient partie de CSS 2.1.
page-break-beforepage-break-afterpage-break-inside
La spécification CSS Fragmentation a défini plus tard des propriétés conçues pour tout contexte fragmenté; la spécification comprenait des détails sur les médias paginés, les colonnes CSS et la spécification des régions différées; Les régions fragmentent également un contenu continu. En rendant ces propriétés communes, elles peuvent être appliquées à tout futur contexte fragmenté, tout comme les propriétés d'alignement de Flexbox ont été déplacées vers la spécification Box Alignment afin qu'elles puissent être utilisées dans les dispositions de grille et de bloc.
break-beforebreak-afterbreak-inside
Par exemple, j'ai utilisé la propriété
bread-inside: avoid prevent pour l'élément
<figure> pour empêcher la légende de se séparer de l'image elle-même. Un navigateur qui prend en charge cette propriété doit conserver l'élément intact, même si les colonnes semblent inégales.
Malheureusement, la prise en charge de ces propriétés dans les colonnes CSS est plutôt mitigée. Mais même lorsqu'ils sont pris en charge, ils doivent être considérés comme une proposition car il est nécessaire de faire autant de demandes pour contrôler le transfert, que le navigateur, en fait, ne peut effectuer le transfert nulle part. La spécification définit les priorités dans ce cas, mais pour vous, il peut être encore plus utile de contrôler uniquement les situations les plus importantes.
Problème de colonne sur le Web
L'une des raisons pour lesquelles nous ne voyons pas l'utilisation massive des colonnes CSS sur le Web est que cela entraînerait un changement dans l'interaction du lecteur avec la page, l'obligeant à défiler latéralement et non de haut en bas. D'accord, ce n'est pas très pratique.
Si vous fixez la hauteur du conteneur, par exemple, en utilisant l'unité de vue de la zone de visualisation vh, et qu'il y aura trop de contenu, un débordement se produira dans la direction de la ligne et nous obtiendrons un défilement horizontal.
Ce problème rend l'utilisation des colonnes CSS sur le Web quelque chose avec laquelle nous devons travailler très attentivement en termes de quantité de contenu qui y est publié.
Bloquer les haut-parleurs à débordement
Pour le niveau 2 de la spécification CSS Columns, nous envisageons d'activer la méthode par laquelle les colonnes débordantes, qui provoquent actuellement le défilement horizontal, apparaissent à la place dans le sens du bloc.
Cela signifie que vous pouvez avoir un conteneur de colonnes avec une hauteur fixe, et dès que le contenu crée des colonnes remplissant ce conteneur, un nouvel ensemble de colonnes sera créé ci-dessous. Ce serait quelque peu similaire à notre exemple ci-dessus avec un élément couvrant, cependant, au lieu de créer un nouveau bloc de colonne, ce serait un débordement provoqué par un conteneur avec une contrainte de dimension de bloc.
Cette fonctionnalité rendrait les colonnes beaucoup plus utiles sur le Web. Bien que nous soyons encore loin de cela, vous pouvez toujours suivre
ce problème dans le référentiel du groupe de travail CSS . Si vous avez des exemples supplémentaires d'utilisation de cette fonctionnalité, écrivez à leur sujet, cela aide vraiment lorsque de nouvelles fonctionnalités sont développées.
Comment les multicolonnes sont-elles utiles aujourd'hui?
Avec la spécification actuelle, il n'est pas recommandé de diviser tout le contenu en colonnes sans prendre en compte d'éventuels problèmes de défilement. Cependant, il existe des situations où les enceintes sont parfaites. Il existe de nombreux exemples à considérer lorsque vous recherchez des modèles de conception.
Réduisez les petits éléments d'interface ou de texte
Les multicolonnes peuvent être utiles partout où il y a une petite liste d'éléments qui devraient occuper moins d'espace. Par exemple, une simple liste de cases à cocher ou une liste de noms. Souvent dans de telles situations, le visiteur ne lit pas une colonne à la fin, après quoi il revient au début de la suivante, mais cherche dans le contenu une case à cocher pour cliquer ou un lien pour aller. Même si une situation survient avec l'apparition du défilement, cela ne devrait pas être un problème.
Vous pouvez voir un exemple d'utilisation similaire des haut-parleurs sur le site Web de
DonarMuseum
Petite quantité de contenu pré-connue
Il existe des situations où, lors du développement d'un site, nous savons à l'avance que la quantité de certains contenus sera petite et s'adaptera à la plupart des écrans sans provoquer de défilement indésirable. J'ai utilisé les colonnes des pages de présentation de
Notist pour une introduction.
Andy Clarke a conçu un excellent exemple pour
Equfund
Pour éviter les situations de défilement sur de très petits écrans, n'oubliez pas que vous pouvez utiliser des expressions multimédias pour vérifier la hauteur de la fenêtre ainsi que la largeur. L'activation des colonnes uniquement aux points de contrôle dont la
min-height minimale minimale est supérieure à suffisante pour le contenu peut sauver les utilisateurs de très petits appareils.
Affichage de contenu de type maçonnerie
Un autre exemple où une disposition de colonne fonctionne correctement est dans les situations où vous souhaitez afficher le contenu dans un style de maçonnerie. Les colonnes sont actuellement la seule méthode de disposition qui créera ce type de disposition avec des éléments de différentes hauteurs. CSS Grid ne mettra pas en retrait ou étirera un élément pour correspondre strictement à une grille à deux dimensions.
Veerle Pieters a un excellent exemple d'utilisation de colonnes à ces fins sur sa page
inspirante .
Remplacement de Grid et Flexbox
column- propriétés de
column- également être utilisées comme solution de rechange pour une grille ou une disposition flexible. Si vous spécifiez l'une des propriétés de colonne pour le conteneur, puis transformez ce conteneur en une disposition Flex ou Grid en utilisant
display: flex ou
display: grid tout comportement de colonne sera annulé. Si vous avez, par exemple, une mise en page de carte qui utilise CSS Grid et est lisible dans plusieurs colonnes, vous pouvez utiliser les colonnes comme un simple secours. Les navigateurs qui ne prennent pas en charge la grille CSS recevront un affichage de colonne, ceux qui prennent en charge recevront une grille.
N'oubliez pas les multicolonnes!
Très souvent, lorsque je réponds à des questions sur le choix entre Grid ou Flexbox, je recommande plutôt les multicolonnes. Vous ne pourrez peut-être pas les utiliser sur tous les sites, mais lorsque vous rencontrez une tâche appropriée, ils peuvent devenir très utiles. MDN possède des ressources de
colonnes CSS utiles et des
propriétés de fragmentation associées.
Si vous utilisez des colonnes dans votre projet, vous devriez peut-être en laisser une mention dans les commentaires pour partager d'autres façons d'utiliser cette fonctionnalité.