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-width - Propriété CSS

column-width

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

Description rapide
Définit la largeur des colonnes.
Statut
Standard
S'applique à
Containers, sauf tableaux.
Type de valeur
Dimension+
Valeurs prédéfinies
auto
Pourcentages
Non autorisés car cela figerait le nombre de colonnes.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété column-width passe progressivement d'une valeur à une autre.
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-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.

Syntaxe de column-widthSchéma syntaxique de la propriété column-width (largeur des colonnes en CSS). auto auto length lengthcolumn-width:;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 CSS de dimension). Les pourcentages ne sont pas autorisés.

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

    La valeur initiale est : auto.

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.

Les mises en page en colonnes sont utilisées pour améliorer la lisibilité des pages. En effet, les lignes de texte trop longue fatiguent l’œil, qui a du mal à les suivre sur une grande largeur. Les journaux utilisent très fréquemment des mises en page avec plusieurs colonnes, soit pour décomposer un texte long, soit pour mettre en page plusieurs textes sur une même page. Les espaces à gauche de la première colonne et à droite de la dernière colonne sont appelés "marges", tandis que les espaces entre les colonnes sont appelés "gouttières".

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.

Les mises en page en colonnes sont utilisées pour améliorer la lisibilité des pages. En effet, les lignes de texte trop longue fatiguent l’œil, qui a du mal à les suivre sur une grande largeur. Les journaux utilisent très fréquemment des mises en page avec plusieurs colonnes, soit pour décomposer un texte long, soit pour mettre en page plusieurs textes sur une même page. Les espaces à gauche de la première colonne et à droite de la dernière colonne sont appelés "marges", tandis que les espaces entre les colonnes sont appelés "gouttières".

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

Dans ces exemples de code, le paramètre el, présent dans chaque fonction, représente l'élément de la page sur lequel on souhaite travailler.

Modifier la valeur de column-width en Javascript.

Voici comment modifier en Javascript la valeur de column-width 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).


function setColumnWidth(el) {
el.style['column-width']='200px';
// ou
el.style.columnWidth='200px';
}

Lire en Javascript la valeur de column-width.

La propriété 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.


function getColumnWidth(el) {
alert(el.style['column-width']);
// ou
alert(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.


function getCalcColumnWidth(el) {
alert(window.getComputedStyle(el).getPropertyValue('column-width'));
}

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


function setColumnWidth(el) {
$(el).css('column-width','50vw');
// ou
$(el).css('columnWidth','50vw');
}

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

La lecture de la propriété peut se faire avec les codes suivants. 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.


function getCalcColumnWidth(el) {
alert($(el).css('column-width'));
// ou
alert($(el).css('columnWidth'));
}

Simulateur.

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.

column-width :
Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge générale des mises en page multi-colonnes par les navigateurs.
Colonne 2
Compatibilité des navigateurs avec la syntaxe de la propriété CSS column-width.
1
Columns
2
column-width
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-width.

Les spécifications CSS éditées par le W3C sont organisées en modules. column-width 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.

Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
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 les caractéristiques d'une mise en page sur plusieurs colonnes.