Column-width - Propriété CSS
Résumé des caractéristiques de la propriété column-width
autoautocolumn-width passe progressivement d'une valeur à une autre.
(1) Les pourcentages ne sont pas autorisés car cela figerait le nombre de colonnes (50% signifie forcément deux colonnes).
Alors que la propriété column-width définit une largeur minimale pour les colonnes, le nombre de colonnes étant variable.
Schéma de la syntaxe de column-width.
Sur le schéma :
lengthest une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.
Description de la propriété column-width.
column-width définit la largeur des colonnes minimale, ce qui veut dire que, s'il y a de la place pour afficher des colonnes plus larges, le navigateur le fera.
Si on souhaite imposer une largeur de colonne bien précise, le seul moyen sera de définir également la largeur du conteneur et la largeur du gap.
Pour une présentation générale des mises en page sur plusieurs colonnes, et pour une gestion plus sensitive
(auto-adaptation des colonnes à la taille de l'écran), reportez-vous à la propriété CSS columns.
Valeurs pour column-width.
- column-width: auto;
Valeur par défaut. La largeur des colonnes est déterminées d'après le nombre de colonnes et la largeur disponible. Si le nombre de colonnes n'est pas défini non plus, le texte sera affiché sur une seule colonne de largeur 100%.
- column-width: 200px;
Les colonnes auront une largeur minimale correspondant à la valeur indiquée. Toutefois, si la place disponible le permet, le navigateur peut afficher des colonnes plus larges.
La valeur doit être un nombre positif et suive d'une unité de dimension (voir les unités de dimension). Les pourcentages ne sont pas autorisés.
Valeurs communes à toutes les propriétés :
column-width: initial (auto)
column-width: inherit
column-width: revert
column-width: revertLayer
column-width: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemple d'animation de column-width.
Sur ce premier exemple, le nombre de colonnes (column-count) n'est pas défini.
Le navigateur calcule donc le nombre de colonnes en divisant la largeur disponible par la largeur des colonnes.
Cette dernière étant animée entre 300 et 600 pixels, le nombre de colonnes évolue en fonction.
Sur ce deuxième exemple, le nombre de colonnes maximal est fixé à 3 par la propriété column-count.
Dans son calcul du nombre de colonnes, le navigateur respecte cette contrainte supplémentaire.
Le nombre de colonnes ne sera jamais supérieur à 2, même si la largeur des colonnes évolue, comme dans l'exemple
précédent, entre 300 et 600 pixels.
Accéder à la propriété column-width par programme.
Modifier la largeur des colonnes en Javascript.
Voici comment modifier en Javascript la largeur des colonnes pour un élément el.
Javascript accepte une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['column-width'] = '5cm';
// ou
let el = document.getElementById('id');
el.style.columnWidth = '5cm';
Lire en Javascript la largeur des colonnes.
La propriété column-width doit avoir été affectée directement dans le code HTML avec l'attribut style et non pas en CSS, en passant
par un sélecteur. La largeur de colonne est renvoyée dans l'unité utilisée pour la définir.
let el = document.getElementById('id');
let value = el.style['column-width'];
// ou
let el = document.getElementById('id');
let value = el.style.columnWidth;
Lire la valeur calculée de column-width en Javascript.
La valeur calculée résulte soit de l'application directe d'une valeur à la propriété column-width, soit du mécanisme d'héritage.
La largeur de colonne est retournée en pixels, quelque soit l'unité choisie pour la définir.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('column-width');
Modifier la largeur des colonnes avec JQuery.
$('#id').css('column-width', '5cm');
// ou
$('#id').css('columnWidth', '5cm');
Lire la valeur calculée de la propriété column-width avec JQuery.
La lecture de la propriété peut se faire avec le code suivant. Comme en Javascript, la largeur est retournée en pixels, même si une unité différente a été utilisée pour la définir.
let value = $('#id').css('column-width');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous affichent soit la valeur telle qu'elle a été appliquée à la propriété, soit la valeur calculée. Cette deuxième option permet
de voir comment est mémorisée (sérialisée) la valeur de column-width. On constate en particulier que toutes les autres unités sont converties en pixels.
Exemple interactif avec la propriété column-width.
Ajustez la largeur des colonnes en modifiant la valeur dans la zone de saisie, et observez le résultat dans le cadre en dessous. On pourra noter que des colonnes trop étroites perturbent la justification du texte, en créant de grands espaces entre les mots, ou même, lorsque un seul mot tient dans la largeur de la colonne, en rendant la justification impossible.
L'utilisation de tirets de césures (­) pourrait améliorer la justification, mais ces tirets doivent être introduits manuellement dans le texte aux endroits pertinents. C'est un gros travail.
Compatibilité des navigateurs avec column-width.
column-width pour définir la largeur minimale pour les colonnes (mise en page 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-widthNavigateurs 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-width.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Introduction des mises en page en colonnes, et des propriétés correspondantes, dontcolumn-width.
23 Juin 1999Document de travail.
17 Décembre 2009Candidat à la recommandation.
-
Module CSS - Mise en page multi-colonnes - Niveau 2
19 Décembre 2024Document de travail.
Voir aussi, à propos des mises en page multi-colonnes.
La propriété column-width est référencée dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes), qui décrit tout ce qui
concerne les mises en page multi-colonnes.
Les termes ci-dessous sont également décrits dans cette même spécification :