Multi Colonne

Dernièrement (hier), sur A List Apart est apparu deux articles expliquant comment réaliser des arrangement à colonne multiples pour le web. J’ai trouvé particulièrement intéressant celui sur les listes, cependant j’aimerais suggérer une autre façon de réaliser la chose.

Leur solution finale suggère de donner une classe distincte à chaque élément de la liste. Quel fouillis dans le HTML ! Pourquoi ne pas créer une feuille de style qui ne nécessite aucun attribut class ? Voyons-voir…

D’abord vous avez besoin de connaître le sélecteur d’adjacence. Si vous écrivez li + li comme sélecteur CSS, cela désigne un élément d’une liste qui suit immédiatement un autre élément d’une liste. En d’autre termes, la règle de style sera appliqué à tous les éléments d’une liste, sauf le premier. Génial ! Mettons ça en pratique.

Je vais me baser sur l’exemple 6 de l’article de ALA pour expliquer le reste. Alors peut-être voudrez-vous y jeter un coup d’oeil.

La première utilisation de la classe d’un élément de liste dans la feuille de style attribue une marge négative au sixième et onzième élément pour qu’ils commencent une nouvelle colonne. Nous remplacerons les noms de classe par le sélecteur d’adjacence. Donc ceci :

li.feve,
li.kava
{
    margin-top: -6em;
}

Devient maintenant :

ol li+li+li+li+li + li, 
ol li+li+li+li+li + li+li+li+li+li + li
{
    margin-top: -6em;
}
ol li+li+li+li+li + li+li, 
ol li+li+li+li+li + li+li+li+li+li + li+li
{
    margin-top: 0em;
}

La première règle donne un margin-top négatif à tous les éléments d’une liste précédés par cinq ou dix autre éléments. La deuxième règle remet à zéro la marge pour les autres éléments de la liste (ceux précédés par six ou onze autre éléments). Le résultat est une marge négative uniquement pour le sixième et le onzième élément.

Note sur l’espacement : j’ai groupé les li par 5 — le nombre d’élément dans une colonne — pour rendre la lecture plus facile, autant pour moi que pour le lecteur.

Maintenant nous devons nous occuper du positionnement horizontal de la même façon. Seulement, cette fois, on voit très bien que c’est moins de travail que d’utiliser une classe pour chaque élément. On remplace cet encombrement :

ol li.aloe,
ol li.berg,
ol li.cale,
ol li.dami,
ol li.elde
{
    margin-left: 0em;
}
ol li.feve,
ol li.ging,
ol li.hops,
ol li.iris,
ol li.juni
{
    margin-left: 10em;
}
ol li.kava,
ol li.lave,
ol li.marj,
ol li.nutm,
ol li.oreg,
ol li.penn
{
    margin-left: 20em;
}

Par ces trois règles élégantes :

ol li
{
    margin-left: 0em;
}
ol li+li+li+li+li + li
{
    margin-left: 10em;
}
ol li+li+li+li+li + li+li+li+li+li + li
{
    margin-left: 20em;
}

Le résultat est maintenant exactement le même qu’à l’exemple 6, excepté qu’à présent vous pouvez enlever les attributs class dans le code HTML et que vous pouvez changer l’ordre, insérer ou retirer des éléments à volonté sans vous soucier de la feuille de style.

À présent, on peut dire que le style est vraiment bien séparé du contenu.

Le seul défaut de cette technique semble être que le sélecteur d’adjacence ne fonctionne pas avec IE pour Widnows. :-(