Pendant de nombreuses années, CSS flottants ont été un élément délicat, mais nécessaire, dans la création de mises en page de sites Web. Si votre conception nécessitait plusieurs colonnes, vous vous êtes tourné vers les flotteurs. Le problème avec cette méthode est que, malgré l'incroyable ingéniosité dont ont fait preuve les concepteurs/développeurs Web dans la création de sites complexes mises en page, les flottants CSS n'ont jamais vraiment été destinés à être utilisés de cette manière.
Alors que les flottants et le positionnement CSS auront certainement leur place dans la conception Web pendant de nombreuses années, une mise en page plus récente Des techniques telles que CSS Grid et Flexbox offrent désormais aux concepteurs de sites Web de nouvelles façons de créer la mise en page de leur site. Une autre nouvelle technique de mise en page qui montre beaucoup de potentiel est CSS Multiple Columns.
Les colonnes CSS existent depuis quelques années maintenant, mais le manque de support dans les navigateurs plus anciens (principalement les plus anciens versions d'Internet Explorer) a empêché de nombreux professionnels du Web d'utiliser ces styles dans leur production travail.
Avec la fin de la prise en charge de ces anciennes versions d'IE, certains concepteurs de sites Web expérimentent maintenant une nouvelle mise en page CSS options, colonnes CSS incluses, et constatant qu'ils ont tellement plus de contrôle avec ces nouvelles approches qu'avec flotte.
Les bases des colonnes CSS
Comme son nom l'indique, CSS Multiple Columns (également appelé CSS3 disposition multi-colonnes) vous permet de diviser le contenu en un nombre défini de colonnes. Les propriétés CSS les plus basiques que vous utiliseriez sont:
- nombre de colonnes
- espace-colonne
Pour le nombre de colonnes, vous spécifiez le nombre de colonnes souhaité. L'espace de colonne serait les gouttières ou l'espacement entre ces colonnes. Le navigateur prendra ces valeurs et divisera le contenu de manière égale en le nombre de colonnes que vous spécifiez.
Un exemple courant de plusieurs colonnes CSS dans la pratique serait de diviser un bloc de contenu textuel en plusieurs colonnes, similaire à ce que vous verriez dans un article de journal. Supposons que vous ayez le balisage HTML suivant (notez qu'à des fins d'exemple, nous n'avons mis que le début de un paragraphe, alors qu'en pratique, il y aurait probablement plusieurs paragraphes de contenu dans ce balisage):
Le titre de votre article.
Imaginez beaucoup de paragraphes de texte ici...
Si vous avez ensuite écrit ces styles CSS:
.contenu {
-moz-column-count: 3 ;
-webkit-column-count: 3 ;
nombre de colonnes: 3 ;
-moz-column-gap: 30px ;
-webkit-column-gap: 30px ;
espacement des colonnes: 30px ;
}
Cette règle CSS diviserait la division "contenu" en 3 colonnes égales avec un écart de 30 pixels entre elles. Si vous vouliez deux colonnes au lieu de 3, vous modifieriez simplement cette valeur et le navigateur calculerait les nouvelles largeurs de ces colonnes pour diviser le contenu de manière égale. Notez que nous utilisons d'abord les propriétés préfixées par le fournisseur, suivies des déclarations non préfixées.
Aussi simple que cela soit, son utilisation de cette manière est discutable pour l'utilisation du site Web. Oui, vous pouvez diviser un tas de contenu en plusieurs colonnes, mais ce n'est peut-être pas la meilleure lecture expérience pour le web, surtout si la hauteur de ces colonnes tombe en dessous du « pli » du écran.
Les lecteurs devraient alors faire défiler vers le haut et vers le bas pour lire le contenu complet. Pourtant, le principe des colonnes CSS est aussi simple que vous le voyez ici, et il peut être utilisé pour faire bien plus que simplement diviser le contenu de certains paragraphes - il peut, en effet, être utilisé pour la mise en page.
Disposition avec des colonnes CSS
Supposons que vous ayez une page Web avec une zone de contenu comportant 3 colonnes de contenu. Il s'agit d'une mise en page de site Web très courante, et pour obtenir ces 3 colonnes, vous devez normalement faire flotter les divisions qui s'y trouvent. Avec CSS multi-colonnes, c'est tellement plus facile.
Voici un exemple de code HTML:
De notre blog.
Le contenu irait ici…
Évènements à venir.
Le contenu irait ici…
Le CSS pour créer ces colonnes multiples commence par ce que vous avez vu précédemment:
.contenu {
-moz-column-count: 3 ;
-webkit-column-count: 3 ;
nombre de colonnes: 3 ;
-moz-column-gap: 30px ;
-webkit-column-gap: 30px ;
espacement des colonnes: 30px ;
}
Maintenant, le défi ici est que le navigateur veut diviser ce contenu de manière égale, donc si la longueur du contenu de ces divisions est différente, ce navigateur divisera en fait le contenu d'un division individuelle, en ajoutant le début de celle-ci à une colonne, puis en continuant dans une autre (vous pouvez le voir en utilisant ce code pour exécuter une expérience et ajouter différentes longueurs de contenu à l'intérieur de chaque division).
Ce n'est pas ce que vous voulez. Vous voulez que chacune de ces divisions crée une colonne distincte et, peu importe la taille du contenu d'une division individuelle, vous ne voulez jamais qu'elle soit divisée. Vous pouvez y parvenir en ajoutant cette ligne supplémentaire de CSS:
.content div {
affichage: bloc en ligne ;
}
Cela forcera les divisions qui se trouvent à l'intérieur du "contenu" à rester intactes même si le navigateur les divise en plusieurs colonnes. Mieux encore, puisque nous n'avons rien donné ici de largeur fixe, ces colonnes se redimensionneront automatiquement au fur et à mesure du redimensionnement du navigateur, ce qui en fait une application idéale pour sites Web réactifs. Avec ce style "en ligne" en place, chacune de vos 3 divisions sera une colonne de contenu distincte.
Utilisation de la largeur de colonne
Il existe une autre propriété en plus du "nombre de colonnes" que vous pouvez utiliser, et selon vos besoins de mise en page, cela peut en fait être un meilleur choix pour votre site. Il s'agit de « largeur de colonne ». En utilisant le même balisage HTML que celui montré précédemment, nous pourrions plutôt le faire avec notre CSS:
.contenu {
-moz-column-width: 500px ;
-webkit-column-width: 500px ;
largeur de colonne: 500px ;
-moz-column-gap: 30px ;
-webkit-column-gap: 30px ;
espacement des colonnes: 30px ;
}
.content div {
affichage: bloc en ligne ;
}
La façon dont cela fonctionne est que le navigateur utilise cette "largeur de colonne" comme valeur maximale de cette colonne. Ainsi, si la fenêtre du navigateur fait moins de 500 pixels de large, ces 3 divisions apparaîtraient dans une seule colonne, l'une au-dessus de l'autre. Il s'agit d'une mise en page typique utilisée pour les mises en page mobiles/petits écrans.
Au fur et à mesure que la largeur du navigateur augmente pour être suffisamment grande pour contenir 2 colonnes avec les espaces de colonnes spécifiés, le navigateur passera automatiquement d'une disposition à une seule colonne à deux colonnes. Continuez à augmenter la largeur de l'écran et vous obtiendrez éventuellement un design à 3 colonnes, chacune de nos 3 divisions étant affichée dans sa propre colonne. Encore une fois, c'est un excellent moyen d'obtenir de la réactivité, compatible avec plusieurs appareils mises en page, et vous n'avez même pas besoin d'utiliser requêtes multimédias pour changer les styles de mise en page!
Autres propriétés de colonne
En plus des propriétés couvertes ici, il existe également des propriétés pour « règle de colonne », y compris les valeurs de couleur, de style et de largeur qui vous permettent de créer des règles entre vos colonnes. Ceux-ci seraient utilisés à la place des bordures si vous souhaitez avoir des lignes séparant vos colonnes.
Il est temps d'expérimenter
Actuellement, CSS Multiple Column Layout est très bien pris en charge. Avec les préfixes, plus de 94% des utilisateurs Web seraient en mesure de voir ces styles, et ce groupe non pris en charge ne serait en réalité que des versions beaucoup plus anciennes d'Internet Explorer qui ne sont plus prises en charge de toute façon.
Avec ce niveau de support désormais en place, il n'y a aucune raison de ne pas commencer à expérimenter les colonnes CSS et à déployer ces styles dans des sites Web prêts pour la production. Vous pouvez commencer vos expériences en utilisant le HTML et le CSS présentés dans cet article et jouer avec différentes valeurs pour voir ce qui fonctionnerait le mieux pour les besoins de mise en page de votre site.