Column-rule-style - Propriété CSS

column-rule-style

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

Description rapide
Choisit le type de trait pour les filets séparant les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
Statut
Standard
S'applique à
Conteneurs colonnes multiples.
Utilisable sur
HTML
Valeurs prédéfinies
none | dashed | solid | hidden | double | dotted | outset | inset | groove | ridge
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété column-rule-style passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de column-rule-style.

column-rule-style - Syntax DiagramSyntax diagram of the column-rule-style CSS property. See stylescss.free.fr for details. none none hidden hidden solid solid double double dotted dotted dashed dashed groove groove ridge ridge inset inset outset outsetcolumn-rule-style:;column-rule-style:;
Schéma syntaxique de la propriété column-rule-style.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété column-rule-style.

column-rule-style définit le style de la ligne de séparation des colonnes. On retrouve les mêmes possibilités que pour le style des bordures.

Reportez-vous à la page column-rule pour un aperçu de tous les paramètres concernant les lignes de séparation, et à la page columns pour une présentation générale des mises en pages en colonnes par CSS.

La propriété column-rule-style est maintenant décrite dans le module CSS Gap Decorations. Dès que les navigateurs seront à jour, la propriété pourra s'appliquer aussi bien aux conteneur multi-colonnes qu'aux conteneurs grille ou aux conteneurs flex. A ce sujet vous pouvez aussi consulter la page sur rule pour une présentation générale sur les filets.

Valeurs pour column-rule-style.

  • column-rule-style: none;

    Valeur par défaut. Pas de ligne de séparation entre les colonnes.

  • column-rule-style: hidden;

    Ligne de séparation invisible. Dans la mesure où l'épaisseur de la ligne de séparation ne change pas la largeur de la gouttière (gap), cette valeur est équivalente à none.

  • column-rule-style: solid;

    Plusieurs styles de traits sont disponibles. Ils correspondent aux valeurs suivantes :

    solid
    Un trait simple
    double
    Un trait double
    dotted
    Une succession de points
    dashed
    Une succession de tirets
    groove
    Une ligne avec effet 3D : rainure (1)
    ridge
    Une ligne avec effet 3D : bourrelet (1)
    inset
    Une ligne avec effet 3D : incrustation (2)
    outset
    Une ligne avec effet 3D : relief (2)

    (1) Les effets 3D ne sont visibles que si l'épaisseur de la ligne est de au moins 3 pixels. Sur nos exemples, l'épaisseur est de 5 pixels.

    (2) Les effets inset et outset sont mal adaptés aux lignes de séparation de colonnes. En effet, ces effets nécessitent des lignes perpendiculaires, comme dans une bordure autour de l'élément. Appliqués à une simple ligne verticale, ils provoquent seulement un éclaircissement ou un assombrissement de la couleur de la ligne.

  • column-rule-style: dotted solid; column-rule-style: repeat(2, dotted solid);

    Lorsque plusieurs valeurs sont indiquées, séparées par un espace, elles s'appliquent successivement aux différents traits de séparation. S'il y a plus de traits de séparation que de valeurs, la liste est reprise depuis le début. Il est possible également d'utiliser la fonction repeat() lorsque le nombre de traits est important.

    Firefox   ne traite pas encore cette possibilité (2025).

  • column-rule-style: initial; (none) column-rule-style: inherit; column-rule-style: revert; column-rule-style: revertLayer; column-rule-style: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de column-rule-style.

La propriété column-rule-style s'anime très bien, mais bien entendu de façon discontinue puisqu'elle n'accepte que des valeurs prédéfinies.

La gouttière est, en typographie et en imprimerie, l'espace vertical séparant deux colonnes de texte justifié, en fer à droite ou en fer à gauche. Cette gouttière peut comporter un filet pour séparer les colonnes. Une gouttière peut aussi être un espace supplémentaire ajouté aux marges d'un document du côté de la reliure. Elle permet de garantir que le contenu ne se perde pas dans la reliure lorsque les pages sont assemblées.

Exemple interactif avec la propriété column-rule-style.

Explorez les différents type de traits correspondant à column-rule-style avec le simulator.
Les valeurs multiples ne sont pas encore prises en charge par Firefox  .

column-rule-style :
La gouttière, ou colombelle, est, en typographie et en imprimerie, l'espace vertical séparant deux colonnes de texte justifié. L’usage veut que sa valeur soit la largeur des deux lettres, mi, ou encore de quatre caractères moyens, et dépend donc du corps du caractère choisi. La gouttière peut ou non recevoir un filet vertical. (3)

(3) Texte issu de Wikipedia.

Compatibilité des navigateurs avec column-rule-style.

Les mises en page multi-colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il reste des incompatibilités, comme on peut le voir sur le tableau ci-dessous.
Cependant la propriété column-rule-style est bien reconnue dans le cadre d'une mise en page en colonnes, mais pas encore pour les grilles et les flex-box (2025).

Colonne 1
Support des mises en page en colonnes, y compris la gestion des sauts de colonnes.
Colonne 2
Support de la propriété column-rule-style dans le cas d'une mise en page sur plusieurs 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-style
Estimation de la prise en charge globale.
18%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

2

QQ Browser

2

Opéra Mobile

2

Firefox

2

Chrome

2

Safari

Edge

2

Opéra

2

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

2

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

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

La spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes) décrit tout ce qui concerne les mises en page multi-colonnes. La propriété column-rule-style est référencée dans ce module, ainsi que les 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-height
Définit la hauteur des colonnes, dans le cas d'une mise en page sur plusieurs colonnes. Celle-ci peut être inférieure à la hauteur du conteneur, on obtient alors une sorte de tableau.
column-rule
Propriété résumé définissant tous les paramètres du trait de séparation entre les colonnes.
column-rule-color
Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
column-rule-width
Définit l'épaisseur du filet de séparation entre les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
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.