[CSS3] La mise en page en colonnes.

by Game Hero on 2 février 2012

Avec l’émergence des nouveaux devices mobiles (smartphones et tablettes), la mise en page des sites doit évoluer. Les gros blocs de texte ne sont en effet pas si simple à lire sans devoir tout le temps jouer avec l’écran tactile pour suivre le fil du texte. Pour résoudre ce problème, CSS3 apporte une solution élégante, la mise en page en colonnes, en réduisant la largeur du contenu, il ne faudra plus que jongler sur la hauteur de la page.

La presse papier avait raison

Le système de colonnes pour la mise en page existe déjà depuis bien longtemps dans la presse papier et certains sites faisaient déjà une présentation de la sorte depuis longtemps également, mais il fallait un peu jouer du code pour arriver à cela. Grâce à CSS3, tout cela devient beaucoup plus simple et intuitif. Il suffit d’avoir son contenu dans une div, dans cet exemple on donnera l’id « content » pour pouvoir le retrouver dans le CSS. Voici le code CSS3 pour faire une pagination en colonne :

#content {
  -webkit-column-count: 3;
  -webkit-column-rule: 1px solid #000;
  -webkit-column-gap: 3em;
  
  -moz-column-count: 3;
  -moz-column-rule: 1px solid #bbb;
  -moz-column-gap: 2em;
  
  column-count: 3;
  column-rule: 1px solid #bbb;
  column-gap: 2em;
  
  display: block;
}

Malheureusement, il faut encore pour l’instant faire du code en fonction du navigateur et du moteur de rendu. Mais sinon, c’est extrêmement simple. column-count doit prendre une valeur numérique indiquant le nombre de colonnes à afficher, column-rule indique le style du séparateur de colonne, la une ligne grise d’un pixel et le column-gap indique la distance entre le texte et le séparateur. A part harmoniser le rendu en fonction du navigateur, il n’y a rien de plus simple que de faire des colonnes en CSS3.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>