Column-rule-color - Propriété CSS

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

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• #xxxxxx est le code hexadécimal d'une couleur.
• name est le nom d'une couleur.
• color est une couleur définie par l'une des fonctions CSS suivantes : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

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

column-rule-color définit la couleur des lignes de séparation entre les colonnes (rule) dans le cas d'une mise en page sur plusieurs colonnes.
Remarque : les colonnes des tableaux ou des grilles ne sont pas concernées par cette propriété.

Pour une description plus générale des paramètres de la ligne de séparation entre les colonnes, reportez-vous à la propriété résumée column-rule. Et pour une présentation générale des possibilités de mise en colonnes, voyez la page columns.

Évolution de column-rule-color.

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

• column-rule-color: currentcolor;

  La couleur du trait de séparation des colonnes sera la même que celle du texte, pour l'élément concerné.

• column-rule-color: transparent;

  Le trait de séparation des colonnes sera transparent, c'est à dire invisible.

• column-rule-color: #448018;

  Le caractère dièse ( # ) introduit un code hexadécimal sur 3, 6 ou 8 digits. Ce code désigne l'une des couleurs parmi les 65 millions disponibles.
  Pour davantage de précisions sur l'écriture du code hexadécimal, reportez-vous à la page sur Les couleurs.

• column-rule-color: blue;

  Plus d'une centaine de couleurs ont reçu un nom standardisé, bien reconnu par tous les navigateurs. Ce nom doit être inscrit sans apostrophes ni guillemets.

• column-rule-color: hsl(...);

  De très nombreuses fonctions permettent également de désigner une couleur. Reportez- vous à leur page respective pour connaître leur syntaxe exacte ou à la page Les couleurs pour une liste complète de ces fonctions.

• column-rule-color: initial; (currentcolor) column-rule-color: inherit; column-rule-color: revert; column-rule-color: revertLayer; column-rule-color: unset;

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

Exemple d'animation de column-rule-color.

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

(1) Texte en provenance de Wikipedia

Compatibilité des navigateurs avec column-rule-color.

Les mises en page sur plusieurs colonnes sont à peu près bien prises en charge par les navigateurs actuels. On voit cependant sur le tableau ci-dessous qu'il reste des incompatibilités. Cependant la propriété column-rule-color est bien reconnue.

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-color

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

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

  Introduction des mises en page multi-colonnes et des propriétés qui s'y rapportent, comme column-rule-color.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

• Module CSS - Décoration des espaces - Niveau 1.

  La propriété column-rule-color a été introduite dans le module Gap Decorations, ce qui étendra son usage aux conteneurs grille et flex-box.
  

  17 Avril 2025

  Document de travail.

  

  

  

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

Les mises en page multi-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-color est référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :