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

column-fill

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

Description rapide
Gère la répartition du contenu entre les colonnes.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
balance | auto | balance-all
Pourcentages
Ne s'appliquent pas.
Valeur initiale
balance
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété column-fill passe d'une valeur à l'autre sans transition.
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-fill.

column-fill définit comment se fera la répartition du contenu entre les colonnes. La première solution est de passer à une colonne suivante lorsque la colonne actuelle est pleine, la dernière colonne pouvant alors être plus courte que les autres. La deuxième solution est d'équilibrer au mieux la hauteur de chacune des colonnes.

D'autres contraintes peuvent influer sur la hauteur des colonnes. Ce sont par exemples des sauts de colonne forcés avec les propriétés break-before et break-after.
Les propriétés widows et orphans qui évitent que des lignes de texte se retrouvent isolées en haut ou en bas d'une colonne, influencent également la taille des colonnes.

Syntaxes pour column-fill.

Syntaxe de column-fillSchéma syntaxique de la propriété CSS column-fill (mise en page sur plusieurs colonnes). auto auto balance balance balance-all balance-allcolumn-fill:;column-fill:;
  • column-fill: auto;

    Le navigateur remplit les colonnes les unes à la suite des autres, en passant à une nouvelle colonne lorsque la colonne en cours est pleine. Cela suppose que la hauteur des colonnes soit fixée (height).
    Le remplissage des colonnes sera inégal et les dernières colonnes peuvent même être vides.

  • column-fill: balance;

    Valeur par défaut. Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes.

  • column-fill: balance-all;

    Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes. La différence avec la valeur précédente n'apparaît que dans une restitution fragmentée, comme une impression (fragmentation par pages).

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

    La valeur initiale est : balance.

Animation de column-fill.

L'animation de la propriété column-fill est possible mais d'un intérêt limité. De plus cela risque de générer des calculs assez lourds.

La répartition du contenu entre ces deux colonnes (balance) est géré par la propriété column-fill. Pour les besoins de la démonstration, celle-ci a été animée. Afin de ne pas gêner l'équilibrage des colonnes, les propriétés orphans et ont été fixées à leur valeur minimale, c'est à dire 1.
Vous pouvez consulter le CSS de l'animation, ainsi que les règles appliquées à cet élément en cliquant sur le bouton ci-dessus.

Exemple interactif avec column-fill.

La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill.

column-fill :
Extrait du livre de Daniel Glazman - "CSS2, des feuilles de styles pour le Web", décembre 1998 : « Netscape retarde considérablement le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d’HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit donc d’intégrer aux documents de nouveaux éléments HTML simples gérant la présentation. »

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge par les navigateurs des mises en page multi-colonnes.
Colonne 2
Compatibilité des navigateurs avec la syntaxe de la propriété CSS column-fill.
1
Columns
2
column-fill
Estimation de la prise en charge en pourcentage du parc actuel.
21%
94%

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-fill.

Les spécifications CSS éditées par le W3C sont organisées en modules. column-fill 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.
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 la largeur des colonnes.
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.