column-count - Propriété CSS
Résumé des caractéristiques de la propriété column-count
auto
auto
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 valeurauto
, le nombre de colonnes est exactement celui qui est défini parcolumn-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
..
- 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.
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.
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.
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é).
column-count
.
column-count
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.