Comment utiliser les colonnes CSS3

Avec la diversité croissante des tailles de moniteur, il n'est pas pratique de concevoir des blocs de texte uniques qui occupent toute la largeur de l'écran. La solution traditionnelle consiste à diviser le texte en colonnes manuellement, ce qui demande beaucoup de temps. ou pour diviser le texte dynamiquement avec JavaScript, qui ne fonctionne pas de manière universelle. En outre, il s’agit d’un problème de présentation, nous devrions être en mesure de le styliser avec CSS sans utiliser de systèmes de grille ou les flottants ne devraient pas nous?

CSS3 vous permet en fait de styliser votre texte en différentes colonnes, il vous permet même de définir une gouttière - l’espace entre ces colonnes - de cette façon, vous avez un contrôle complet au lieu du cadre ou du système de grille. .

Mieux encore, CSS3 se dégrade avec élégance, donc si quelqu'un navigue dans Netscape Navigator, votre site ne se cassera pas.

Prise en charge du navigateur

Il est important de noter que, bien que tous les navigateurs actuels prennent en charge les multi-colonnes dans CSS3 - oui même IE10 - de nombreuses versions récentes - IE9 par exemple - ne le font pas. Même si le support est bon, vous voudrez inclure les préfixes de navigateur pour webkit (-webkit-) et mozilla (-moz-). Il n'est pas nécessaire d'inclure -ms- ou -o- pour IE et Opera, car ils prennent en charge la fonctionnalité dans son intégralité ou pas du tout.

Les propriétés

Cette fonctionnalité CSS vous donne en fait une poignée de propriétés pour vous donner un contrôle total sur la manière dont votre contenu est imprimé dans le navigateur et ces propriétés sont:

• column-count: vous spécifiez ici le nombre de colonnes que vous souhaitez appliquer à l'élément.
• column-width: la largeur d'une seule colonne. Sachez que cette valeur sera probablement modifiée par le navigateur.
• gap-gap: la largeur de l'espace entre les colonnes.
• column-rule-width: la partie règle est une sorte de bordure pour vos colonnes et vous spécifiez ici la largeur de cette bordure.
• column-rule-style: aime aussi la bordure, si vous devez spécifier le style.
• colonne-règle-couleur: ici la couleur de la règle.
• column-span: la valeur ici indiquera au navigateur le nombre de colonnes que vous voulez qu'un élément couvre, ceci est bon pour les en-têtes et fonctionne comme colspan et rowspan dans les tables.

Avec toutes ces propriétés, je ne pense pas que nous ayons besoin d’autre chose pour avoir un contrôle total sur nos colonnes. Bien sûr, toutes ces propriétés ne sont pas nécessaires au bon fonctionnement de la disposition multi-colonnes. En fait, seul le nombre de colonnes est nécessaire, mais vous devez toujours utiliser l'espace des colonnes pour laisser un peu de place au texte. les uns sur les autres.

Pour mettre cela en pratique, il suffit de deux lignes de code:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Si vous souhaitez également appliquer une règle aux colonnes, il vous suffit d'ajouter les propriétés supplémentaires suivantes:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Comme la propriété de bordure la plus commune, vous pouvez également empiler la couleur, le style et la largeur sur la même ligne, comme ceci:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Si vous avez un titre et que vous souhaitez que cet en-tête couvre toutes les colonnes, il vous suffit d'ajouter une ligne:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Démo

Vous pouvez l'appliquer à pratiquement n'importe quel code HTML, d'un seul paragraphe à plusieurs.