Column-rule - Propriété CSS
Résumé des caractéristiques de la propriété column-rule
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 :
column-rule-width
: épaisseur de la ligne de séparation.column-rule-style
: style de la ligne de séparation (paramètre obligatoire).column-rule-color
: couleur de la ligne de séparation.
É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
.
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.
column-gap
).
L'esthétique du résultat est probablement 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.
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
.
multi colonnes
column-rule
Navigateurs 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-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éecolumn-rule
.23 Juin 1999Document de travail.17 Décembre 2009Candidat à la recommandation.
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 :