Propriété CSS `column-rule-color`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

En savoir plus
Voir la compatibilité complète

La propriété CSS column-rule-color définit la couleur des lignes tracées entre les colonnes des dispositions en grille, flexible et multi-colonnes.

Exemple interactif

column-rule-color: purple;

column-rule-color: rgb(48 125 222), rgb(222 48 125);

column-rule-color: rgb(48 125 222), repeat(3, rgb(222 48 125));

column-rule-color: purple, repeat(auto, orange, yellow);

<section id="default-example">
  <p id="example-element">
    Londres. Le trimestre de Noël vient de s'achever, et Lord George siège à
    Lincoln's Inn Hall. Le temps est magnifique en ce mois de mai. Il y a autant
    de boue dans les rues que si les eaux venaient tout juste de se retirer de
    la surface de la terre, et il ne serait pas étonnant de croiser un
    ornithorynque, d'environ deux pieds de long, se dandinant comme un lézard
    sur Morgan Hill.
  </p>
</section>

#example-element {
  columns: 7;
  column-rule: solid thick;
  gap: 7px;
}

Syntaxe

css

/* Une seule valeur de type <color> */
column-rule-color: purple;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);

/* Plusieurs valeurs */
column-rule-color: purple, magenta;
column-rule-color: repeat(3, purple), repeat(3, transparent);
column-rule-color: repeat(3, purple), repeat(3, yellow, blue);
column-rule-color: purple, repeat(auto, transparent), purple;
column-rule-color: purple, repeat(auto, blue, yellow), purple;
column-rule-color:
  repeat(3, purple), repeat(auto, transparent), repeat(3, purple);

/* Valeurs globales */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;

Valeurs

La propriété column-rule-color accepte une liste de valeurs séparées par des virgules, y compris :

<line-color>: Une couleur (<color>) représentant la couleur de la ligne.
<repeat-line-color>: La fonction repeat(), avec un entier (<integer>) de 1 ou plus comme premier argument et une ou plusieurs valeurs <color> comme arguments suivants. L'entier (<integer>) définit combien de fois les valeurs <color> doivent être répétées.
<auto-repeat-line-color>: La fonction repeat(), avec auto comme premier argument et une ou plusieurs valeurs <color> comme arguments suivants. Les valeurs <color> fournies sont répétées autant de fois que nécessaire pour remplir les valeurs de toutes les règles de colonne qui ne sont pas spécifiées explicitement par d'autres composants de la valeur de la propriété.

Description

La propriété column-rule-color définit les couleurs des lignes tracées dans les gouttières entre les colonnes des conteneurs multi-colonnes, flexible et grille comportant plusieurs colonnes.

La valeur est une liste de composants séparés par des virgules, qui peut inclure des types <line-color>, <repeat-line-color> et <auto-repeat-line-color>.

La propriété column-rule-color, ainsi que les propriétés column-rule-width et column-rule-style, peut être définie à l'aide de la propriété raccourcie column-rule. La propriété column-rule-color, ainsi que la propriété row-rule-color, peut également être définie à l'aide de la propriété raccourcie rule-color.

Une couleur de ligne (<line-color>) peut être déclarée comme toute valeur CSS <color> valide. Si la valeur de la propriété ne contient qu'une seule <color>, toutes les lignes de règle ont cette couleur. Par exemple, si nous déclarons ce qui suit, les lignes dans les gouttières entre les colonnes sont toutes bleues :

css

column-rule-color: blue;

Lorsque plusieurs <line-color> sont déclarées, elles sont appliquées aux lignes tracées dans les gouttières entre les colonnes dans l'ordre défini. S'il y a plus de lignes que de valeurs <line-color>, la liste des couleurs est répétée jusqu'à ce que chaque ligne de règle de colonne ait une couleur. Par exemple, si nous déclarons ce qui suit, toutes les lignes impaires sont rouges et toutes les lignes paires sont jaunes.

css

column-rule-color: red, yellow;

Répéter les couleurs de ligne

La fonction repeat(), avec un entier de 1 ou plus comme premier argument, peut être utilisée pour répéter une liste valide de valeurs CSS <color> passées en tant qu'arguments suivants le nombre de fois défini. Cela permet de répéter les valeurs de couleur autant de fois que nécessaire sans avoir à les énumérer individuellement. Les déclarations suivantes sont équivalentes :

css

column-rule-color: blue, yellow, red, yellow, red;
column-rule-color: blue, repeat(2, yellow, red);

Cela crée une liste de cinq couleurs. Si le nombre de couleurs dans la liste de couleurs de la valeur column-rule-color dépasse le nombre d'interstices entre les colonnes, les couleurs excédentaires sont ignorées. Si le conteneur a trois colonnes, la ligne dans la première gouttière est bleue et la deuxième jaune.

Répéter automatiquement les couleurs de ligne

La fonction repeat(), avec auto comme premier argument au lieu d'un entier positif, peut également être utilisée. Avec auto comme premier argument, les valeurs <color> passées en tant qu'arguments suivants sont répétées autant de fois que nécessaire pour remplir les valeurs de toutes les règles de colonne qui ne sont pas spécifiquement définies par d'autres composants de la valeur de la propriété.

css

column-rule-color: blue, repeat(auto, yellow), red;

Dans ce cas, la première règle de colonne est bleue, la dernière est rouge et toutes les autres sont jaunes. Tant qu'il y a au moins deux règles de colonne, la première est toujours bleue et la dernière est toujours rouge. Toutes les autres règles sont jaunes, ce qui signifie que s'il n'y a que 2 ou 3 colonnes, il n'y a pas de lignes jaunes.

Le mot-clé auto dans la fonction repeat() crée un répéteur automatique qui remplit les valeurs des couleurs des lignes de règle de colonne qui ne reçoivent pas autrement de valeurs provenant d'autres parties de la liste, empêchant ainsi la liste d'être répétée. Une valeur column-rule-color peut inclure, au maximum, un repeat(auto, <color>).

Définition formelle

Valeur initiale	`currentcolor`
Applicabilité	éléments sur plusieurs colonnes
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	une couleur

Syntaxe formelle

column-rule-color = 
  <line-color-list>       |
  <auto-line-color-list>  

<line-color-list> = 
  <line-color-or-repeat>#  

<auto-line-color-list> = 
  <line-color-or-repeat>#? , <auto-repeat-line-color> , <line-color-or-repeat>#?  

<line-color-or-repeat> = 
  <color>              |
  <repeat-line-color>  

<auto-repeat-line-color> = 
  repeat( auto , [ <color> ]# )  

<repeat-line-color> = 
  repeat( [ <integer [1,∞]> ] , [ <color> ]# )  

<integer> = 
  <number-token>

Exemples

Exemple simple

Dans cet exemple, nous définissons une seule couleur pour les lignes tracées entre les colonnes dans une mise en page multi-colonnes.

HTML

Nous incluons un paragraphe de texte.

html

<p>
  Ce texte est réparti en trois colonnes. La propriété `column-rule-color` est
  utilisée pour changer la couleur de la ligne tracée entre les colonnes. Ne
  trouvez-vous pas cela merveilleux&nbsp;?
</p>

CSS

Nous définissons l'élément HTML <p> comme un conteneur multi-colonnes. Nous incluons un gap de 7px pour fournir un espacement pour la règle en pointillés de 3px tracée entre les colonnes :

css

p {
  column-count: 5;
  gap: 7px;
  column-rule-style: dashed;
  column-rule-width: 3px;

  column-rule-color: blue;
}

Résultat

Plusieurs valeurs de couleur

Cet exemple montre comment déclarer plus d'une couleur, et comment les valeurs sont répétées lorsqu'il y a moins de valeurs dans la liste des couleurs que de gouttières entre les colonnes.

En utilisant le même HTML et CSS que dans l'exemple précédent, nous incluons trois couleurs séparées par des virgules comme valeur de column-rule-color :

<p>
  Ce texte est réparti en trois colonnes. La propriété `column-rule-color` est
  utilisée pour changer la couleur de la ligne tracée entre les colonnes. Ne
  trouvez-vous pas cela merveilleux&nbsp;?
</p>

p {
  column-count: 5;
  gap: 7px;
  column-rule-style: dashed;
  column-rule-width: 3px;
}

@layer no-support {
  @supports not (column-rule-color: red, blue) {
    body::before {
      content: "Votre navigateur ne prend pas en charge les valeurs multiples pour la propriété column-rule-color";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

css

p {
  column-rule-color: blue, yellow, red;
}

Résultat

Il y a quatre gouttières mais seulement trois couleurs, donc la liste est répétée, les première et quatrième lignes étant toutes deux bleues.

Utiliser la fonction `repeat()`

Cet exemple montre comment utiliser la fonction repeat() dans la valeur de la propriété column-rule-color et comment cette fonction peut aider à éviter que des valeurs complexes ne deviennent ingérables.

HTML

Nous incluons une liste d'auteur·ice·s :

html

<ul>
  <li>Kimberlé Crenshaw</li>
  <li>Angela Y. Davis</li>
  <li>Bernardine Evaristo</li>
  <li>Audre Lorde</li>
  <li>Cathy Park Hong</li>
  <li>Zoya Patel</li>
  <li>Juno Mac</li>
  <li>Molly Smith</li>
  <li>Tara Westover</li>
</ul>

CSS

Nous commençons par définir la liste comme un conteneur de grille, en créant des colonnes avec la propriété grid-template-columns. Nous incluons un espacement (gap) de 7px pour fournir suffisamment d'espace entre les colonnes pour notre règle en pointillés de 3px, et supprimons les puces avec list-style-type défini sur none.

Ensuite, pour montrer comment les valeurs peuvent devenir compliquées et l'utilité de la fonction repeat(), nous déclarons deux propriétés personnalisées, que nous utilisons dans trois déclarations de fonction de couleur color-mix() pour créer des couleurs bleue, rouge et jaune. La couleur jaune color-mix() se trouve dans une fonction repeat(), définie pour se répéter 3 fois.

Nous avons également ajouté une bordure autour de chaque élément de la grille afin que vous puissiez voir comment la ligne se place au milieu de la gouttière entre les colonnes.

css

ul {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
  list-style-type: none;
  column-rule-style: dashed;
  column-rule-width: 3px;

  --base: yellow;
  --mixin: blue;
  column-rule-color:
    color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
    repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
}
li {
  border: 1px solid #ddd;
}

Résultat

La grille comporte neuf cellules, donc huit gouttières. La fonction repeat() répète nos deux couleurs mélangées trois fois, créant une liste de couleurs avec sept couleurs. Comme il y a plus de gouttières de colonne que de couleurs dans la liste, la dernière couleur de la liste n'est pas utilisée.

Utiliser `auto` dans `repeat()`

Cet exemple montre comment utiliser auto, au lieu d'un entier, dans la fonction repeat().

Nous utilisons le même HTML et CSS que dans les exemples précédents, mais nous remplaçons la valeur de column-rule-color. Ici, nous utilisons repeat(auto, <color>) pour définir toutes les lignes en noir presque transparent (#0003), sauf la première et la dernière, que nous définissons en noir solide (black).

css

ul {
  column-rule-color: black, repeat(auto, #0003), black;
}

Résultat

@layer no-support {
  @supports not (column-rule-color: repeat(3, red)) {
    body::before {
      content: "Votre navigateur ne prend pas en charge les fonctions `repeat()` dans une valeur de propriété column-rule-color";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}