Column-rule - Propriété CSS

column-rule
column-rule-width
column-rule-style
column-rule-color

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

Description rapide
Propriété résumé définissant tous les paramètres du trait de séparation entre les colonnes.
Statut
Standard
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Description de la propriété column-rule.

column-rule définit le trait de séparation entre les colonnes, dans le cas d'une mise en page sur plusieurs colonnes. C'est une propriété résumée qui regroupe plusieurs informations :

Emplacement de la ligne de séparation de colonnes

Évolution de column-rule.

La propriété est maintenant décrite également dans le module CSS Gap Decorations afin d'étendre ses possibilités aux grilles et aux flex-box.

C'est tout récent. Cette page sera complétée quand les navigateurs commenceront à l'implémenter.

Exemples d'utilisation de la propriété column-rule.

Dans ce premier exemple, nous avons défini seulement le style de trait (le seul paramètre obligatoire). L'épaisseur et la couleur ont été fixées à leur valeur initiale, à savoir medium pour l'épaisseur du trait et currentColor pour la couleur. En effet, comme toutes les propriétés résumées, column-rule initialise toutes les valeurs concernées, en fixant à leur valeur initiale les paramètres qui ne sont pas spécifiés.
Ce deuxième exemple est un cas particulier : la largeur du trait de séparation a été fixée à une valeur plus grande que la largeur de la gouttière (voir column-gap). L'esthétique du résultat est proba­blement critiquable, mais cet exemple montre bien que la largeur du trait de séparation ne s'ajoute pas à la largeur de la gouttière.
On voit d'autre part que le trait de séparation empiète sur le texte des colonnes, mais tout en restant en arrière de celui-ci. Il n'y a donc pas de risque de masquage du contenu des colonnes par le trait de séparation.

Exemple d'animation de column-rule.

Reportez-vous aux pages sur les propriétés individuelles pour des exemples d'animations.

Compatibilité des navigateurs avec column-rule.

Les mises en page sur plusieurs colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il subsiste des non conformités. La propriété column-rule est quant à elle bien reconnue, tout au moins dans sa syntaxe pour les mises en page en colonnes.

Colonne 1
Support des mises en page en colonnes, y compris la gestion des sauts de colonnes.
Colonne 2
Support de la propriété résumée column-rule, qui définit les paramètres des traits de séparation des colonnes pour une mise en page en 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.

1
Mise en page
multi colonnes
2
Propriété
column-rule
Estimation de la prise en charge globale.
18%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

1

QQ Browser

1

Opéra Mobile

1

Firefox

1

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

2

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété column-rule.

  • Module CSS - Mise en page multi-colonnes - Niveau 1

    Première description des mises en page sur plusieurs colonnes.
    Et introduction des propriétés qui s'y rapportent, dont la propriété résumée column-rule.
    WD
    23 Juin 1999
    Document de travail.
    CR
    17 Décembre 2009
    Candidat à la recommandation.
    PR
    REC

Voir aussi, à propos des mises en page en colonnes.

Les mises en page sur plusieurs colonnes sont décrites dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes). La propriété column-rule est expliquée dans ce module. Vous y trouverez également la référence des termes ci-dessous :

Propriétés :

column-count
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
column-fill
Gère la répartition du contenu entre les colonnes.
column-rule-color
Définit la couleur des lignes de séparation de colonnes.
column-rule-style
Choisit le type de trait pour la séparation des colonnes.
column-rule-width
Définit l'épaisseur du trait de séparation entre les colonnes.
column-span
Gère le chevauchement du contenu sur plusieurs colonnes.
column-width
Définit la largeur des colonnes.
columns
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.