Column-rule-style - Propriété CSS
Résumé des caractéristiques de la propriété column-rule-style
none
| dashed
| solid
| hidden
| double
| dotted
| outset
| inset
| groove
| ridge
none
column-rule-style
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de column-rule-style
.
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: solid;
Plusieurs styles de traits sont disponibles. Ils correspondent aux valeurs suivantes :
solid
Un trait simpledouble
Un trait doubledotted
Une succession de pointsdashed
Une succession de tiretsgroove
Une ligne avec effet 3D : rainure (1)(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
etoutset
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
.
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.
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
.
multi colonnes
column-rule-style
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
.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Première description des mises en page en colonnes.
Introduction des propriétés qui s'y rapportent, dontcolumn-rule-style
.23 Juin 1999Document de travail.17 Décembre 2009Candidat à la recommandation. -
Module CSS - Décoration des espaces - Niveau 1.
La propriétécolumn-rule-style
est maintenant décrite dans le module Gap Decorations, ce qui étendra son usage aux conteneurs grille et flex-box.17 Avril 2025Document de travail.
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 :