Aujourd'hui je m'aventure sur un terrain que je connais peu. Cependant, j'ai assuré mes arrières en demandant main forte aux spécialistes de mon équipe.
Cet article fait suite au constat très juste de Cedric Savarese sur le site A List Apart : alors que la plupart des écrans d'ordinateur sont plus larges que longs, la plupart des sites Web sont l'opposé absolu, plus longs que larges.
En effet, force est de lui donner raison. La plupart des sites Web dotés d'une mise en page fixe n'utilisent pas tout l'espace disponible à gauche et à droite de leur contenu. Les mises en page flexibles, en ce sens, font une meilleure utilisation de l'espace horizontal. Mais l'inconvénient réside dans le maintien de longueurs de ligne utilisables.
D'après les experts, la longueur de ligne idéale se situe entre 8 et 12 mots. Voyez les médias imprimés comme les journaux : ils n'hésitent pas à utiliser des longueurs de lignes assez courtes. Pourquoi ? Parce qu'ils le peuvent ! Comment ? En disposant le texte en plusieurs colonnes.
On le sait : les web designers ont une certaine marge de manœuvre pour en faire autant. Mais on sait aussi qu'avec le Web, on n'est pas toujours assuré de contrôler le rendu final de l'information. Si les utilisateurs utilisent une taille de fonte différente ou désactivent les images, c'est souvent la catastrophe !
Bien sûr, ce problème n'est pas nouveau. Il a déjà été largement analysé et en partie résolu par les membres du W3C.
Le module de multi-colonne CSS3
Le multi-colonnage W3C est un module qui travaille sur trois niveaux. Il est proposé par le CSS pour étendre les possibilités des modèles de "box" traditionnels. Il permet au contenu de se couler dans des colonnes multiples à l'intérieur d'un élément. Les designers peuvent ainsi spécifier dans combien de colonnes un élément devrait être rendu. Laissant aux navigateurs le soin de s'occuper du formatage du texte pour que les colonnes soient équilibrées.
Techniquement, ces nouvelles propriétés proposées sont les suivantes :
- ‘column-count’ : le nombre de colonnes dans lesquelles répartir le contenu.
- ‘column-width’ : la largeur optimale pour chaque colonne.
- ‘column-gap’ : la gouttière entre les colonnes.
- ‘column-rule’ : le filet entre les colonnes.
Quid de l'implémentation ?
Les développeurs de Gecko 1.8 ( Mozilla and Co. ) ont annoncé la première implémentation du module en avril de cette année. Aujourd'hui, seuls Firefox (1.5 > 3.0) et Safari supportent le module multi-column de CSS 3. Reste à espérer que les autres suivront, sans trop tarder.
D'autres ont imaginé des solutions alternatives. Ainsi, International Herald Tribune, par exemple, utilise une disposition de multi-colonnes grâce au JavaScript : le script divise le contenu d'un élément et le réarrange dans plusieurs colonnes.
La mise en oeuvre est assez facile. Pas besoin de connaître le JavaScript, il suffit de télécharger le fichier, et de le lier :
<script type="text/JavaScript" src="css3-multi-column.js"></script>
On peut alors commencer à utiliser les propriétés CSS3 dans les feuilles de style comme pour une autre CSS. Voir les propriétés ci-dessus.
Mais, si cette solution fonctionne bien, elle n'en a pas moins quelques inconvénients. Le premier est l'ajout à la structure HTML d'un nombre important d'éléments, dont certains restent vides ! En plus d'alourdir la page, cela entraîne l'apparition de marges non désirées.
Il faut aussi savoir que le code JavaScript a tendance à couper et faire bouger le contenu d'une colonne à une autre. Les résultats sont donc plus ou moins aléatoires.
Il existe actuellement d'autres solutions, en PHP. Elles génèrent les colonnes côté serveur, plutôt que côté client. Le résultat est ainsi plus propre, et dépend nettement moins du browser utilisé. Seul inconvénient : elles sont assez lourdes à mettre en oeuvre.