column-count |
Compteur de colonnes |
CSS3 |
|
Syntaxe
column-count: nombre|auto|inherit|initial;
|
Paramètres
Paramètre |
Description |
nombre |
Ce paramètre permet d'indiquer le nombre de colonnes optimale que doit contenir l'élément. |
auto |
Ce paramètre permet d'indiquer que le nombre de colonnes va être déterminer par les autres propriétés. C'est la valeur par défaut. |
inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer le nombre de colonnes qu'un élément doit avoir dans l'étendue.
Remarques
- Définition et rôle : La propriété column-count permet de définir le nombre de colonnes dans lesquelles le contenu d'un élément sera divisé. Elle est
utilisée dans le modèle de mise en page multi-colonnes de CSS pour créer des designs fluides et structurés.
- Valeur numérique : La valeur de column-count doit être un entier positif (exemple : 2, 3,...). Cette valeur indique exactement combien de colonnes
le contenu de l'élément doit occuper, indépendamment de la largeur de chaque colonne.
- Valeur spéciale auto : Si la valeur auto est utilisée, le navigateur Web décide automatiquement du nombre de colonnes en fonction de l'espace
disponible et des autres propriétés comme column-width.
- Interaction avec column-width : Lorsqu'elle est utilisée conjointement avec la propriété column-width, le comportement des colonnes peut changer. Si les
deux propriétés sont définies, le navigateur décide de leur priorité en équilibrant le nombre de colonnes et leur largeur.
- Effet visuel : L'utilisation de column-count est particulièrement utile pour créer des mises en page de type magazine ou journal, où le texte est divisé
en plusieurs colonnes pour une meilleure lisibilité.
- Compatibilité des navigateurs : La propriété est bien prise en charge par les navigateurs modernes, mais certains anciens navigateurs peuvent nécessiter des préfixes comme -webkit-column-count ou -moz-column-count.
- Effets sur le contenu : Le contenu est automatiquement réparti entre les colonnes sans être coupé au milieu d'un mot, sauf si la propriété word-break ou hyphens est utilisée pour permettre des césures.
- Combinaison avec d'autres propriétés : column-count fonctionne bien avec d'autres propriétés du module multi-colonnes, comme column-gap (espacement entre colonnes) et column-rule (ligne séparatrice entre colonnes), permettant des contrôles avancés de la mise en page.
Dernière mise à jour : Dimanche, le 20 décembre 2015