Médiaforma

Trois colonnes en CSS3

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous avez vu à quel point il était simple de définir un design sur trois colonnes. Que diriez-vous de faire encore plus simple en utilisant CSS3 ?

Commencez par définir une balise <div> et remplissez-la avec un texte assez long : 300 ou 400 mots par exemple. Ici, cette balise a pour classe troiscol.

La mise en page sur 3 colonnes sera définie dans la feuille de styles styles12.css.

Vous allez devoir définir :

  • Le nombre de colonnes : column-count ;
  • La largeur des colonnes : column-width ;
  • L’espace entre les colonnes : column-gap.

Attention : Tous les navigateurs ne sont pas encore compatibles avec toutes les instructions CSS3. Pour l’instant, seuls Firefox et Chrome le sont, à condition de spécifier les préfixes -moz (pour Firefox) et -webkit (pour Chrome) avant les propriétés colum-count, column-width et column-gap.

Dans cet exemple, le texte sera réparti sur trois colonnes de largeur 160 pixels espacées entre elles de 20 pixels.

Comme prévu, Firefox et Webkit affichent le résultat attendu :

Par contre Internet Explorer (ici en version 9), n’est pas en mesure d’interpréter les instructions CSS :

Les possibilités offertes par CSS3 au niveau du multicolonnage sont certes très intéressantes et aussi, très simple à mettre en œuvre. Cependant, étant donné que les propriétés column ne sont pas compatibles avec tous les navigateurs, je vous conseille de les éviter pour l’instant. Par contre, vous pouvez utiliser les techniques de multicolonnage présentées dans les rubriques précédentes. Elles ont l’avantage de fonctionner sur tous les navigateurs.

 
Comments

No comments yet.