Colonnes multiples sont une facette importante de la pose sur le texte - les journaux les ont utilisés pendant des décennies. Ainsi sont-ils importants qu'il est étonnant que la façon actuelle de parvenir à une mise en page multi-colonnes est l'une des techniques les plus complexes pour un nouveau designer à saisir.

CSS3 introduit un nouveau module. Il vous permet de spécifier le nombre de colonnes de texte devrait être divisé en bas et comment ils devraient apparaître.

Colonnes multiples en utilisant CSS3

A l'heure actuelle, cette fonctionnalité est disponible dans Firefox et Safari 3. Quand le module sera finalisé dans la spécification CSS3, il sera adopté par d'autres navigateurs et roulé dans leurs mises à jour.

Il ya quatre propriétés qui se rapportent à la disposition des colonnes multiples dans CSS3, vous permettant de définir le nombre de colonnes, la largeur, l'écart entre chaque colonne et une bordure entre chacune:

• column-count
• column-width
• column-gap
• column-rule

jusqu'a present, un sélecteur de navigateur spécifique est également nécessaire pour déterminer si Safari ou Firefox devrait afficher le sélecteur. Le code à utiliser pour créer une disposition à deux colonnes avec une règle 1px entre les colonnes seraient:

.multiplecolumns { -moz-column-width: 130px; 
-webkit-column-width: 130px; 
-moz-column-gap: 20px; 
-webkit-column-gap: 20px; 
-moz-column-rule: 1px solid #ddccb5; 
-webkit-column-rule: 1px solid #ddccb5; }

En attendant

Il pourrait encore être un moment avant que cette fonctionnalité est supportée sur les systèmes suffisant pour permettre une utilisation généralisée. A List Apart, publié en 2005 une implémentation JavaScript de cette capacité qui vous permet d'utiliser des sélecteurs de la même manière et offre un soutien dans tous les principaux navigateurs. Il convient également de se dégradent très bien lorsque la fonction est largement adopté et le JavaScript n'est plus nécessaire. C'est une excellente solution provisoire si vous êtes désespéré pour plusieurs colonnes sur votre site.

En conclusion ...

Disposition des colonnes multiples permettra d'économiser un mal de tête énorme pour de nombreux designers, permettant un meilleur contrôle de la façon dont copie est affichée. Vous pouvez lire la spécification complète pour les multi-colonnes sur le site W3 si vous souhaitez plus d'informations sur la fonction.

Le prochain et dernier article de cette série se penchera sur les caractéristiques de fond différentes disponibles dans CSS3, y compris en utilisant plus d'un fond pour un élément, et en spécifiant la taille de milieux.