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 la séparation des colonnes.
Statut
Standard
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
Les liens du schéma donnent accès à plus de détails

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.
Remarque : cette propriété ne concerne que les colonnes d'une mise en page multi-colonnes. Les colonnes des tableaux et des grilles ne sont pas concernées.

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.

Évolution de column-rule-style.

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. Nous compléterons cette page quand les navigateurs commenceront à l'implémenter.

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: 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 interactif avec la propriété column-rule-style.

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. (1)

(1) 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.

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

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-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-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 lignes de séparation de 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.