Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

column-count - Propriété CSS

column-count

Résumé des caractéristiques de la propriété column-count

Description rapide
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
Statut
Standard
Type de valeur
Entier+
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
L'animation est théoriquement progressive mais sera limitée aux valeurs entières.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

Description de la propriété column-count.

column-count définit le nombre de colonnes, dans le cadre d'une mise en page sur plusieurs colonnes. Cette propriété fonctionne en coordination avec la largeur des colonnes (voir column-width) :

  • Si column-width n'est pas définie ou a la valeur auto, le nombre de colonnes est exactement celui qui est défini par column-count.
  • Si la valeur de column-width est définie, column-count indique alors le nombre de colonnes maximal. Le nombre de colonnes peut donc être plus petit pour permettre leur affichage dans la largeur demandée.

Si des sauts de colonnes forcés existent dans le contenu de l'élément, ils peuvent provoquer la création de plus de colonnes que ce qui est prévu par column-count. Rappel : les sauts de colonnes forcés sont définis par les propriétés break-before et break-after.

Pour une présentation générale des mises en page en colonnes, reportez-vous aux explications sur la page de la propriété columns.

Syntaxes pour column-count.

integer est un nombre entier égal ou supérieur à 1..

Syntaxe de column-countSchéma syntaxique de la propriété CSS column-count (mise en plage sur plusieurs colonnes). auto auto integer integercolumn-count:;column-count:;
  • column-count: auto;

    Valeur par défaut. Le nombre de colonnes est déterminé à partir de la largeur des colonnes (voir column-width). Si cette dernière n'est pas définie, le nombre de colonnes est égal à 1.

  • column-count: 3;

    Un nombre sans unité, supérieur à zéro.

  • column-count: initial; column-count: inherit; column-count: revert; column-count: revert-layer; column-count: unset;

    La valeur initiale est : auto.

Animation du nombre de colonnes.

La propriété column-count peut être animée de façon progressive. Mais comme le nombre de colonnes ne peut être qu'un nombre entier, l'animation sera forcément saccadée.

Latius iam disseminata licentia onero­sus bonis omnibus Caesar nul­lum post haec adhi­bens modum orientis latera cuncta vexabat nec hono­ra­tis parcens nec urbium prima­tibus nec plebeiis. Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhi­bens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

Manipulation de la propriété column-count par programme.

Le texte de l'élément ci-dessous (en bleu) est sur une colonne. Les exemples de code donnés plus bas permettent de changer la valeur de la propriété column-count. L'effet est visible immédiatement sur l'affichage.

Lorem ipsum dolor sit amet, consec tetur adipi scing elit. Aliquam vene natis tortor vitae sem con vallis, nec iaculis dui sus cipit. Vest ibulum viverra pre tium ex ac facilisis. Lorem ipsum dolor sit amet, conse ctetur adipi scing elit. In con dimen tum et orci nec tin cidunt. Aenean pla cerat con sequat libero ut effi citur. Nulla vel velit a felis ultri cies ali quam quis ut sapien. Fusce hen drerit massa velit. Ae nean mattis nec arcu rhon cus vesti bulum. Fusce place rat tinci dunt mi ac scele risque. Viva mus accu msan magna nec ele mentum lacinia. Duis feugiat libero at mattis solli citu din. Mae cenas nisl urna, soda les pulvi nar male suada vel, tinci dunt ut dui. Fusce ornare tortor eu maxi mus port titor.

Modifier la valeur de column-count en Javascript.

Javascript accepte au moins deux syntaxes pour modifier la valeur d'une propriété. La première, avec le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots), et la deuxième avec la notation camel-case (une majuscule pour séparer les mots).


function setColumnCount(el) {
el.style['column-count']='2';
// ou
el.style.columnCount='2';
}

Lire en Javascript la valeur de column-count.

L'exemple de code ci-dessous récupère la valeur de column-count si celle-ci a été affectée dans le code HTML, via l'attribut style de l'élément. Les valeurs définies via un sélecteur CSS ne sont pas prises en compte.


function getColumnCount(el) {
alert(el.style['column-count']);
// ou
alert(el.style.columnCount);
}

Lire la valeur calculée de column-count en Javascript.

La valeur calculée est, soit une valeur affectée directement sur l'élément via un sélecteur CSS ou l'attribut style, soit une valeur héritée, soit encore la valeur initiale de la propriété (auto dans le cas de column-count).


function getCalcColumnCount(el) {
alert(window.getComputedStyle(el).getPropertyValue('column-count'));
}

Modifier la valeur de la propriété column-count avec JQuery.

JQuery accepte également deux écritures pour le nom de la propriété : en kebab-case ou en camel-case.


function setColumnCount(el) {
$(el).css('column-count','3');
// ou
$(el).css('columnCount','3');
}

Lire la valeur calculée de la propriété column-count avec JQuery.


function getCalcColumnCount(el) {
alert($(el).css('column-count'));
// ou
alert($(el).css('columnCount'));
}

Exemple interactif.

column-count :
Le CSS est un langage informatique purement déclaratif. Autrement dit, il ne possède pas les structures algorithmiques habituelles telles que des boucles. Néanmoins, la notion de test, classiquement traduite pas l'instruction if dans les langages classiques, commence à apparaître en CSS par le biais de directives telles que @media ou @supports. Les variables font également leur apparition en CSS sous le nom de propriétés personnalisées.

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support général par les navigateurs des mises en page multi-colonnes.
Colonne 2
Compatibilité des navigateurs avec la syntaxe de la propriété CSS column-count.
1
Columns
2
column-count
Estimation de la prise en charge en pourcentage du parc actuel.
21%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que column-count.

Les spécifications CSS éditées par le W3C sont organisées en modules. column-count fait partie du Module CSS - Mise en page multi-colonnes (CSS Multi-column Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Gère la répartition du contenu entre les colonnes.
Définit tous les paramètres du trait de séparation entre les colonnes.
Définit la couleur des lignes de séparation de colonnes.
Choisit le type de trait pour la séparation des colonnes.
Définit l'épaisseur du trait de séparation entre les colonnes.
Gère le chevauchement du contenu sur plusieurs colonnes.
Définit la largeur des colonnes.
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.