Goto CSS3 › Les Colonnes

Qui n'a jamais eu à expliquer à un de ses clients que le média web avait ses limites comparé au média paginé ? On est encore trop souvent contraint d'effectuer des pirouettes en Javascript ou avec des Hack Css pour imiter des schémas de mise en page (pourtant simple) du support papier.

Actuellement, on a pour habitude que le contenu texte d'un élément le remplisse de gauche à droite puis de haut en bas, l'utilisateur ne pouvant intervenir que sur les marges interieures (padding) pour placer son texte. Mais avec l'importance qu'a pris internet sur les autres supports de communication, il était évident qu'on en viendrait à avoir de nouvelles ouvertures pour mettre en page les contenus de nos sites. Ainsi avec l'arrivée du CSS3, une barrière de plus s'effondre : celle de la mise en page en colonne grâce au module multi-column.

Le modèle colonne

Ce modèle s'inscrit donc en dessous du modèle box couramment employé en CSS. Un élément utilisant ce modèle voit donc son contenu divisé en n nombre de colonne d'égale largeur. On retrouve comme possibilité de style, le nombre de colonnes column-count, leur largeur column-width, leur espacement entre elles column-gap ainsi que le style de leur séparation grâce à column-rule.

A noter que les colonnes représentent un tout donc il n'est pas possible de les styler différemment et qu'elles n'ont aucune notion de margin, padding, etc. Voyons donc voir en détail leurs propriétés.

Column-width

Une des notions importante à retenir c'est la largeur des colonnes qui est la même pour chaque colonne. Ainsi avec le code suivant:

div { column-width: 100px ; }

L'élément div cible aura autant de colonne de 100px que l'espace sur le média d'affichage le permet et prendra en largeur totale nombre de colonnes possible *100. Alors qu'avec le code suivant:

div { width: 200px; column-width: 95px; }

Afin de remplir tout le div cible, les largeurs de colonne seront de 100px. La réciproque étant vrai si la largeur de l'élément ne pourrait pas accueillir plus d'une colonne, les colonnes serait alors réduites.

Column-count

Cette propriété permet de définir le nombre de colonnes requises, définissant leur largeur selon la largeur de l'élément cible. Par exemple:

div {column-count: 3 ;}

Ce code produire 3 colonnes sur toute la largeur du média d'affichage. Elles seront donc parfaitement calibrées sur la largeur totale de l'élément si celui-ci venait à être modifié par la réduction d'une fenêtre de navigateur par exemple.

A noter que ces 2 propriétés peuvent être combinées dans la propriété column: count width.

Column-gap

C'est l'espace situé entre chaque colonne du modèle. A noter que cette propriété n'accepte pas de valeur négative. Si séparation grâce à la propriété column-rule il y a, l'espace du gap se verra également réparti de part et d'autre.

Column-rule

Cette règlé générique permet de styler la séparation des colonnes par sur leur couleur, style, et largeur à l'instar des bordures. Ainsi column-rule-color définira la couleur de cette séparation, column-rule-style, le style, column-rule-width, la largeur. Ces 3 propriétés pouvant ainsi être rassemblées sous la forme column-rule: width style color.

Column-break

Tout comme pour le media print, le remplissage des colonnes peut parfois est problématique. Des équivalents aux possibilités de cassure du print sont donc disponibles également. La propriété column-break-before soumise à un élément à l'intérieur d'un modèle colonne se verra donc déplacé en début de colonne suivante. Et réciproquement, la propriété column-break-after verra la suite de cet élément déplacé en debut de colonne suivante.

Column-span

Un autre héritage de la richesse du CSS, le span des tableaux. Ainsi un élément fils d'un modèle colonne pourra très bien s'étaler sur toute la largeur de cet élément grâce à la propriété column-span: 1|all. La valeur all permettra donc a cet élément de prendre toute la largeur de son élément père, la valeur 1 annulera cette capacité.

Column-fill

Dernière propriété, elle permettra de remplir uniformément ou non les colonnes. AInsi avec le code column-fill: balance|auto, on pourra avoir le contenu réparti de façon homogène entre les différentes colonnes ou bien de manière à remplir les colonnes dans l'ordre usant de tout l'espace disponible.

Comportement et divers

A compléter avec le comportement des éléments fils.