Chapitre 1
Généralités sur les éléments

4 Colonnes communicantes : propriété CSS3 column

Termes CSS clés employés : column
Compatibilité navigateurs : nativement IE10+ et Opera11.1+. Chrome, Safari et Firefox avec préfixe.

Problèmatique

Comme précédemment, réaliser une disposition en colonnes sans recourir à un tableau.

Résolution théorique

CSS3 propese grâce à sa propriété column une dernière façon de procéder. Seul Opera et Internet Explorer 10 et ultérieur reconnaissent cette possibilité nativement, les versions précédentes d’Internet Explorer en étant totalement incapables. Les autres navigateurs exigent les préfixes dédiés.

Résolution pratique

Le code HTML reste très proche du cas précédent, si ce n’est que c’est le conteneur qui doit être identifié. Le paragraphe final vierge n’est plus nécessaire.
<DIV class=col> <P>Contenu</P> … <P>Contenu</P> </DIV>
C’est dans le code CSS que sont apportées les modifications. Nous définissons ici un nombre fixe de trois colonnes espacées de 40 px, avec un filet intermédiaire. La largeur des colonnes dépendra de l’espace disponible.
DIV.col {column-count : 3 ; column-gap : 40px ; column-rule : 3px outset black ; }

Colonnes communicantes : propriété column-count

Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis.

Ut ante nunc, volutpat sagittis ultrices vel, tincidunt dignissim sapien. Vestibulum mi leo, condimentum ut porta non, gravida volutpat urna. Mauris euismod egestas nisl ut blandit. Quisque nec posuere sem. Quisque varius elementum feugiat. Pellentesque a lacinia elit. Nunc enim diam, luctus sed adipiscing sed, molestie consequat mi. Sed iaculis porta libero, nec commodo turpis tincidunt eget. Nulla at nunc ut arcu vehicula aliquet quis nec mi. Nulla sed facilisis lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper. Donec ut turpis massa, et auctor velit. Cras placerat eleifend elementum.

Pellentesque porttitor, mauris non pellentesque iaculis, nisl nisi venenatis felis, sit amet commodo lacus ante a elit. Curabitur eu malesuada odio. Maecenas dapibus, leo vitae semper consectetur, nibh nibh sodales lacus, id fringilla velit velit vitae dui. Donec sem odio, mattis euismod laoreet ut, rutrum vitae tellus. Integer purus purus, dignissim vel sagittis ac, scelerisque quis ante.

Cette disposition pose le même problème que précédemment : si la fenêtre est rétrécie, les colonnes deviennent illisibles. Pour disposer de colonnes à largeur minimale, servez-vous de la propriété column-width. Dans le code suivant, il a y par défaut trois colonnes, mais ce nombre sera réduit si la largeur disponible devient insuffisante pour afficher plusieurs colonnes de 150 pixels de large :
DIV.col {column-count : 3; column-width : 150px ; column-rule : 3px outset black ; }

Colonnes communicantes, propriété colum-width

Cette propriété column est très séduisante, mais la non-prise en charge par Internet Explorer 9 et précédents rend délicat tout déploiement destiné à un large public. Il faut néanmoins la garder en mémoire pour l’avenir…

Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque

Chapitre 1 Généralités sur les éléments