Column-count - Propriété CSS
Résumé des caractéristiques de la propriété column-count
autoautocolumn-count passe d'un nombre entier à un autre, sans transition.Schéma de la syntaxe de column-count.
column-count.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma :
integerest un nombre entier égal ou supérieur à1.
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-widthn'est pas définie ou a la valeurauto, le nombre de colonnes est exactement celui qui est défini parcolumn-count. - Si la valeur de
column-widthest définie,column-countindique 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.
Valeurs pour 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; (
auto) column-count: inherit; column-count: revert; column-count: revertLayer; column-count: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de column-count.
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.
Accéder à la propriété column-count par programme.
Modifier le nombre de colonnes 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).
let el = document.getElementById('id');
el.style['column-count'] = '2';
// ou
let el = document.getElementById('id');
el.style.columnCount = '2';
Lire en Javascript le nombre de colonnes.
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.
let el = document.getElementById('id');
let value = el.style['column-count'];
// ou
let el = document.getElementById('id');
let value = 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).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('column-count');
Modifier le nombre de colonnes avec JQuery.
JQuery accepte également deux écritures pour le nom de la propriété : en kebab-case ou en camel-case.
$('#id').css('column-count', '2');
// ou
$('#id').css('columnCount', '2');
Lire la valeur calculée de la propriété column-count avec JQuery.
let value = $('#id').css('column-count');
Autres exemples de code.
Si ces codes ne vous suffisent pas, voyez d'autres exemples sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété column-count et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée.
Exemple interactif avec la propriété column-count.
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.
Compatibilité des navigateurs avec column-count.
La compatibilité semble mauvaise pour les mises en page multi-colonnes, mais c'est dû aux propriétés de saut break-after, etc.) qui
sont mal reconnues.
column-count permettant de disposer le texte sur plusieurs colonnes.Remarques :
(1) Ne supporte pas les valeurs avoid (dans le contexte d'une mise en page multi-colonnes), avoid-column et avoid-page pour les propriétés beak-after, break-before et break-inside.
(2) Ne supporte pas les valeurs break-after, break-before et break-inside.
multi colonnes
column-countNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété column-count.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Cette spécification décrit la mise en page sur plusieurs colonnes. Il suffit de définir le nombre de colonnes sur le conteneur, et le contenu se disposera sur le nombre de colonnes indiqué. Bien entendu d'autres propriétés permettent d'agir plus finement sur les conteneur multi-colonnes.
Cette spécification définit également des propriétés concernant l'espace entre les colonnes et le trait de séparation éventuel.Concernantcolumn-count. Introduction des mises en page sur plusieurs colonnes, et des propriétés qui s'y rapportent, commecolumn-count.
23 Juin 1999Document de travail.
17 Décembre 2009Candidat à la recommandation.
-
Module CSS - Mise en page multi-colonnes - Niveau 2
Peu de nouveautés sur le niveau 2 de cette spécification. Notons simplement un pseudo-élément
::columnqui permet de cibler les colonnes elles-mêmes (toutes les colonnes d'un seul coup). Il accepte peu de propriétés.Concernantcolumn-count. Pas de modification de la propriétécolumn-countsi ce n'est que les valeurs0sont maintenant interdites.19 Décembre 2024Document de travail.
Autres propriétés relatives au multi-colonage.
Les mises en page multi-colonnes sont décrites dans la spécification Module CSS - Mise en page multi-colonnes (Module CSS - Mise en page multi-colonnes).
La propriété column-count est expliquée dans ce module. Vous y trouverez également la référence des termes ci-dessous :