CSS3

CSS3 : colonnes multiples

Créer de multiples colonnes, comme dans un journal, était possible avant le CSS3 mais il fallait utiliser le mode flottant et diviser le contenu en plusieurs morceaux, et ce n’était pas compatible avec du contenu dynamique.

Avec les colonnes CSS3 tout devient simple et le navigateur gère lui-même le contenu sur plusieurs colonnes. Le seul souci est que la prise en charge n’est pas encore vraiment satisfaisante :

Mais ça ne nous empêche pas de commencer à l’utiliser !

Le nombre de colonnes

La première propriété essentielle est celle du nombre de colonnes column-count. La valeur par défaut est auto qui signifie une seule colonne (autrement dit elle ne sert à rien…).

Par exemple si on veut 3 colonnes on va écrire ceci (JSFiddle) :

div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Pour une fois je signale les préfixes parce que sinon ça ne fonctionnera pas sur les principaux navigateurs.

Le texte va ainsi se répartir harmonieusement sur trois colonnes :

L’écart entre les colonnes

Par défaut on a un petit écart entre les colonnes (en général 1em). On peut agir sur ce paramètre avec la propriété column-gap (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;
}

Cette fois on a un écart plus important entre les colonnes :

La largeur des colonnes

La largeur des colonnes découle automatiquement de la place disponible. Si on veut 3 colonnes et que la largeur disponible diminue on va obtenir ce genre de résultat :

Ce n’est pas forcément souhaitable pour la lisibilité. Avec la propriété column-width on peut imposer une largeur minimale (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
}

Dans ce cas de figure si on ne dispose pas de suffisamment d’espace le nombre de colonnes se réduit automatiquement :

Un trait de séparation

Par défaut entre les colonnes on a un espace vide. Avec la propriété column-rule on peut spécifier qu’on désire un trait. On peut choisir le type de trait, l’épaisseur et la couleur. Voici un exemple (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule-style: dashed;
  -moz-column-rule-style: dashed;
  column-rule-style: dashed;
  -webkit-column-rule-width: .2em;
  -moz-column-rule-width: .2em;
  column-rule-width: .2em;
  -webkit-column-rule-color: blue;
  -moz-column-rule-color: blue;
  column-rule-color: blue;
}

Avec ce résultat :

Vous pouvez simplifier la syntaxe en regroupant les règles :

-webkit-column-rule: .2em dashed blue;
-moz-column-rule: .2em dashed blue;
column-rule: .2em dashed blue;

Occuper plusieurs colonnes

Il peut arriver de vouloir qu’un titre (ou autre) s’étale sur plusieurs colonnes, pour réaliser cela on dispose de la propriété column-span. Elle ne fonctionne malheureusement pas encore sur Firefox, ce qui en limite l’intérêt. Voici un exemple (JSFIddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
div h2 {
  -webkit-column-span: all;
  column-span: all;
}

Avec ce résultat :

Le remplissage des colonnes

On a vu ci-dessus que le remplissage des colonnes se fait en sorte que le contenu soit équilibré. Si on désire un remplissage séquentiel on doit utiliser la propriété column-fill. Par défaut sa valeur est balance, c’est-à-dire un équilibre entre les colonnes. Si on utilise la valeur auto alors le remplissage devient séquentiel (on remplit complètement la première colonne, puis la seconde, etc…)

Voici un exemple (JSFiddle) :

div {
  height: 270px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-fill: auto;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
}

J’ai limité la hauteur avec une règle height à 270px. J’obtiens ce résultat :

On peut aussi se demander que devient le contenu qui ne rentre pas dans les colonnes imposées (overflow). Voici un exemple :

div {
  height: 150px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

Comme la hauteur est limitée le contenu excédentaire se place à droite et je me retrouve avec un ascenceur horizontal (c’est pas un ascenceur d’ailleurs !) :

Les ressources

Les ressources pour ces colonnes pultiples ne sont pas encore très nombreuses.

La spécification W3C est une bonne base.

Il y a une page MDN en français mais pas très complète.

Cette page en anglais est très bien illustrée d’exemples.

Les générateurs

Les générateurs aussi ne sont pas très nombreux, voici les 2 qui me semblent les plus intéressants :

Print Friendly, PDF & Email

Laisser un commentaire