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.

Les Sélecteurs

Sans rentrer dans une grande explication, les sélecteurs en css permettent tout simplement de cibler de différentes manières les éléments à styler évitant ainsi de devoir identifier clairement chacun d'entre eux.

Le CSS2 avait déjà apporté bon nombre d'améliorations, malheureusement beaucoup d'entre elle se sont vu pénalisé par IE6 pendant trop longtemps, les laissant ainsi de côté encore aujourd'hui. Le CSS3 essaiera donc de relancer la machine en poussant encore plus loin les possibilités de ciblage.

Edito

Bienvenue dans le monde merveilleux du CSS3.

Pour vous faire patienter jusqu'à sa sortie vous trouverez au fil des pages des articles sur sa documentation du W3C, un récapitulatif des nouvelles propriétés et un script pour les émuler en attendant.

A Propos