column-width - Propriété CSS
Résumé des caractéristiques de la propriété column-width
auto
auto
column-width
passe progressivement d'une valeur à une autre.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 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.
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.
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.
Prise en charge par les navigateurs (compatibilité).
column-width
.
column-width
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.