Des techniques modernes pour l'agencement en colonnes

Introduction du cours

Il a longtemps été impossible d'obtenir des colonnes de même taille sans effectuer de bidouillages : avec des images, du JavaScript ou d'autres techniques qui ne touchent parfois pas toutes les personnes ou ne sont pas facilement adaptables (certaines techniques vous demanderont de recommencer toute la procédure si vous désirez écarter un peu plus les colonnes). Ce tutoriel présente deux techniques rendues possibles par l'utilisation de CSS3, l'une d'entre elles vous démontrera qu'il est possible de simuler le comportement des tableaux pour parvenir à nos fins, tandis que l'autre utilisera une fonctionnalité prévue uniquement à cet effet.

Avant l'arrivée et la popularisation de CSS, les tableaux remplissaient malgré eux cette fonction ; il a, par ailleurs, été démontré sous beaucoup d'angles que cette option était à proscrire. Notamment au niveau de la sémantique : un tableau est fait pour représenter des données. À la lecture de ces lignes, vous devez sûrement vous demander pourquoi je vous explique de nouveau cela (car je suis sûr que vous le saviez déjà auparavant) ; nous allons exploiter ces fonctionnalités pour produire l'effet escompté. ;)

Un autre moyen d'atteindre notre but, de façon plus claire mais compatible avec moins de navigateurs, est d'utiliser les nouvelles propriétés définies avec la norme CSS niveau 3 qui permettent de créer des colonnes de texte dans n'importe quel élément. Nous aborderons ce sujet, accompagné d'un sujet de travaux pratiques, à la fin de ce tutoriel.

La première de ces techniques est fondée sur CSS 2.1 et l'autre sur CSS niveau 3.

En résumé, et généralement, les techniques présentées ne fonctionneront pas sur Internet Explorer (hormis la première qui est supportée depuis la version 8 du navigateur précédemment cité). De plus, les codes d'exemple de ce cours sont rédigés en HTML5, encore bogué sur I.E. ; si vous utilisez une autre version de HTML (HTML4, xHTML…), il vous faudra adapter les codes en conséquence.

Copier à la perfection un tableau

Non, il ne s'agit pas là de peinture mais d'affichage d'éléments en tant que tableaux. ^^

Revenons sur ce que je vous ai dit tout à l'heure à propos des tableaux. La principale lacune des tableaux est le fait qu'ils ne sont pas conçus pour s'occuper du design d'un site, mais pour stocker des données. Un design « en tableaux » compliquera la lecture du code source. Le code suivant met en application cette technique démodée, il n'est là qu'à titre d'information :

<table> <tr> <td>Colonne 1</td> <td>Colonne 2, avec du contenu supplémentaire<br />…<br />…</td> </tr> </table>

L'utilisation de ce code est désormais, et pour de bonnes raisons, fortement déconseillée.

Ce qui nous intéresse, nous, c'est ce qui se passe avec le tableau, c'est-à-dire sa capacité à avoir des cellules de même taille. Avec la norme CSS apparue en juin 2011 (CSS 2.1), il est possible de simuler le comportement des cellules de tableaux, sans pour autant créer des tableaux. Autrement dit, les propriétés réservées aux tableaux peuvent désormais s'appliquer à n'importe quel élément.

En résumé, pour cette méthode, nous créerons un code tout à fait banal, qui ne contiendra pas de tableau. Du côté CSS, on active la représentation sous forme de tableau. La présentation est séparée du contenu, la sémantique est respectée : la technique est parfaitement envisageable.

L'affichage en tableaux est supporté par près de 90 % des utilisateurs (selon Caniuse).

Mettons, dès à présent, tout cela en pratique ! :)

Un cadre parfait pour nos colonnes-tableaux

Dans cette première partie pratique, nous allons créer pas à pas, avec des explications détaillées, une base de contenu en HTML, en laissant de côté le CSS. Nos deux colonnes contiennent du texte, elles peuvent donc être représentées par des éléments de paragraphe comme suit :

<p class="colonne">Contenu de la colonne</p> <p class="contenu">Contenu</p>

Ce code, cependant, n'est pas suffisant au niveau de la présentation CSS. Réfléchissons à un élément de tableau : nos deux paragraphes seront des cellules. En l’occurrence, ces cellules sont « abandonnées » en plein milieu du code, au contraire d'un tableau où elles sont contenues dans l'élément de même nom. En conclusion, nous devons créer un élément de division qui contiendra nos colonnes et qui sera affiché en tant qu'élément principal de tableau.

Voici donc la structure HTML que nous avons choisie :

<div class="colonnes"> <p class="colonne">Contenu de la colonne</p> <p class="contenu">Contenu principal</p> </div>

Prévisualiser

Étant donné que nous n'allons pas modifier cette structure, nous pouvons conclure que quelqu'un ayant désactivé CSS pourra parfaitement lire nos colonnes, sans être dérangé par des éléments superflus en rapport avec le design.

Étudions à présent la partie la plus intéressante et la moins banale : le CSS.

Dresser la base de nos colonnes, grâce à CSS

Nous allons pour cette seconde partie pratique créer ensemble un style CSS minimal et suffisant pour que s'affichent nos colonnes, tout cela en explications.

La propriété display

La propriété display a le plus souvent été connue sous trois valeurs possibles :

display: block; /* Affiche en tant qu'élément block */ display: inline; /* Affiche en tant qu'élément en-ligne */ display: none; /* N'affiche pas l'élément */

La révision première de CSS2 introduit bien des nouvelles fonctionnalités, mais en complète aussi d'autres en ajoutant des nouvelles possibilités. La propriété display n'échappe pas à la règle et introduit beaucoup de valeurs intéressantes dont des valeurs pour l'affichage en tant que tableaux. Les deux valeurs suivantes vont nous intéresser particulièrement :

display: table; /* Affiche en tant qu'élément principal de tableau */ display: table-cell; /* Affiche en tant que cellule de tableau */ Affichage des éléments de colonnes

Lors de la mise en place de notre structure HTML, nous avons présenté cette division comme nécessaire. En réalité, elle ne l'est pas vraiment puisqu'il ne s'agit pas de vraies cellules, mais, en créant un élément de tableau, nous pourrons profiter des propriétés qui s'y appliquent. Voici donc notre début de codage :

div.colonnes { display: table; } p.colonne, p.contenu { display: table-cell; padding: 5px; border: 1px solid black; }

Prévisualisation

Nous pouvons remarquer, grâce aux bordures que nous avons définies, que les deux colonnes possèdent bien la même hauteur. Nous n'avons pas défini de largeurs spécifiques, elles s'adaptent donc en conséquence de leur contenu. Cela dit, vous pouvez les spécifier vous-même. ;)

Le dernier coup de peinture : finaliser en un design

Vous pouvez remarquer que le design est très minimaliste et vous vous dites sûrement qu'il est très difficile de styler des cellules de tableau…

Eh bien, vous vous trompez fortement, dans ce chapitre seront présentées les propriétés utiles pour rendre plus jolies nos colonnes.

Les avantages de display: table

Le plus important de cette balise est le fait de pouvoir définir l'espacement entre nos cellules. En effet, étant donné que nous héritons, en plus du comportement des tableaux, de ses propriétés, nous pouvons utiliser border-spacing.

div.colonnes { display: table; border-collapse: separate; /* Pour s'assurer que les cellules ne sont pas collées */ border-spacing: 5px; /* 5 pixels d'écartement entre les colonnes */ }

La propriété empty-cells: [show | hide] pourrait aussi vous être utile, bien que je ne lui aie pas encore trouvé d'utilité. ;)

Les avantages de display: table-cell

Ici, le plus gros avantage est la propriété vertical-align qui permet de centrer un texte verticalement dans votre colonne. Cela peut se révéler utile pour une colonne qui ne concerne pas la navigation (pour que l'utilisateur ne soit pas obligé de descendre pour atteindre les liens) et qui s'adapte à un contenu afin de « combler le vide » occasionné par ce redimensionnement.

p.colonne { display: table-cell; text-align: center; /* Centrage horizontal */ vertical-align: middle; /* Centrage vertical */ } Un design possible pour nos colonnes

En résumé de tous les agréments présentés dans cette partie, j'ai créé à titre d'exemple un design possible en colonnes. Voici le lien pour le visualiser directement, tandis que vous pouvez regarder la source CSS ici. Ce n'est qu'une possibilité de design, vous pouvez en créer bien d'autres, sous beaucoup de formes différentes.

D'autres valeurs pour la simulation de tableaux

La propriété display est capable d'afficher, en plus des cellules, tous les éléments concernant les tableaux. Voici une liste à laquelle vous pouvez vous référer :

Valeur

Description

table

Élément principal de tableau

table-inline

Tableau en-ligne

table-row

Ligne de tableau

table-column

Colonne de tableau

table-row-group

Groupement de lignes de tableau

table-column-group

Groupement de colonnes de tableau

table-cell

Cellule de tableau

table-header-group

En-tête de tableau

table-footer-group

Pied de tableau

table-caption

Titre de tableau

Source des valeurs :W3C - Liste des valeurs pour la propriété display (anglais)

Sans tableaux ? Des propriétés CSS3 prévues à cet effet

Il y a peu de temps, en lisant votre journal aux pages 2 et 3, vous avez sûrement remarqué du texte disposé en colonnes. Depuis lors, vous rêvez peut-être d'obtenir le même résultat sur votre site. Le W3C a pensé à vous en introduisant dans la nouvelle norme CSS niveau 3 des propriétés simples pour créer des colonnes de texte. Nous allons donc nous intéresser au « working draft » de ces propriétés, voici le texte en question.

L'idée est en travail depuis avril 2011, c'est donc relativement récent, ce qui veut dire que peu de navigateurs l'implémentent. Néanmoins, ici n'est pas le sujet, poursuivons pour trouver ce qui nous intéresse. Voilà, nous y sommes. Intéressons-nous de plus près à ces propriétés, si vous le voulez bien. ^^

Taille et nombre des colonnes

Sur les navigateurs dans leurs versions récentes (Firefox 3.5, Opera 11.1 et, à l'avenir, I.E. 10), chaque élément HTML, chaque texte est disposé en colonnes dans son élément parent ! Simplement, ils sont disposés dans une seule colonne, ce qui peut se régler facilement grâce à plusieurs des propriétés imaginées par le W3C, implémentées sur les navigateurs récents.

Durant la présentation des propriétés d'affichage en colonnes, je les écrirai sans les préfixes propriétaires (-moz-, -webkit- et autres) dans un souci de lisibilité. Cependant, pour qu'elles fonctionnent sur Chrome (et dérivés) et Firefox, il faut les préfixer avec ceux qui ont été présentés plus haut.

• La propriété column-count permet de spécifier le nombre de colonnes de texte présentes dans l'élément. Par défaut, la valeur est auto, ce qui signifie que si vous spécifiez une largeur pour les colonnes, le nombre de colonnes sera calculé par le navigateur. Dans le cas contraire, une seule colonne sera utilisée. La valeur à spécifier pour ces propriétés est simplement un nombre, raisonnable (ne demandez pas cent colonnes sur un élément de 100 pixels de largeur : le tout serait illisible) si possible.

• La propriété column-width permet de spécifier une largeur pour chacune des colonnes qui seront créées. Cette propriété est actuellement prise en compte par les navigateurs uniquement si la propriété column-count est définie à auto, dans le cas contraire sa valeur est ignorée.

  La valeur que peut prendre cette propriété est une longueur comme vous avez l'habitude de les spécifier. Cependant, vous ne pouvez pas utiliser les pourcentages. Mais les autres unités sont utilisables, bien que je vous déconseille l'utilisation des centimètres qui sont très mal interprétés.

• La « méga-propriété » de colonnes (columns) rassemble les deux propriétés citées ci-dessus. Personnellement, je ne lui ai pas trouvé d'utilité puisque la valeur de column-width est ignorée quand l'autre a une valeur. De plus, Firefox ne reconnaît pas cette propriété, ne l'utilisez donc pas avant un peu de temps.

Exemple :

body { column-count: 2; /* Disposition de la page en deux colonnes */ } body { column-width: 10em; /* Disposition de la page en colonnes de taille dix fois supérieure à la normale */ } Améliorer la visibilité...