Propriété CSS rule-color

Exemple interactif

rule-color: purple;

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

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

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

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>
    <i>Q</i>
    <i>R</i>
    <i>S</i>
    <i>T</i>
    <i>U</i>
    <i>V</i>
    <i>W</i>
    <i>X</i>
    <i>Y</i>
    <i>Z</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid thick;
}
#example-element i {
  padding: 5px;
}

Propriétés constitutives

Cette propriété est un raccourci pour les propriétés CSS suivantes :

• column-rule-color
• row-rule-color

Syntaxe

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

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

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

Valeurs

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

<line-color>

Une valeur <color> représentant la couleur de la ligne.

<repeat-line-color>

Une fonction repeat() avec un entier (<integer>) de 1 ou plus comme premier argument et une ou plusieurs valeurs <color> comme arguments suivants. L'entier indique combien de fois les valeurs <color> doivent être répétées.

<auto-repeat-line-color>

Une 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 des règles qui ne sont pas explicitement définies par d'autres composants de la valeur de la propriété.

Description

La propriété rule-color définit les couleurs des lignes tracées dans les gouttières entre les colonnes et les lignes des conteneurs multi-colonnes, flexibles et grilles qui comportent plus d'une colonne ou d'une ligne. Il s'agit d'un raccourci qui règle à la même valeur les propriétés row-rule-color et column-rule-color.

La valeur est une liste d'éléments séparés par des virgules, qui peut inclure les types <line-color>, <repeat-line-color> et <auto-repeat-line-color>. La propriété rule-color, avec les propriétés rule-width et rule-style, se définit avec le raccourci rule.

Couleurs des lignes

Un <line-color> se déclare avec n'importe quelle valeur CSS valide de type <color>. Si la valeur de la propriété contient une seule <color>, toutes les lignes de règle prennent cette couleur. Par exemple, les lignes dans les gouttières entre colonnes et lignes sont bleues :

rule-color: blue;

Lorsque plusieurs valeurs <line-color> sont déclarées, elles s'appliquent aux lignes peintes dans les gouttières de colonnes et de lignes dans l'ordre défini. Si le nombre de règles dépasse le nombre de valeurs <line-color>, la liste des couleurs se répète jusqu'à ce que chaque règle de colonne possède une couleur. Par exemple, chaque règle impaire est rouge et chaque règle paire est jaune.

rule-color: red, yellow;

Répétition des couleurs de ligne

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

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

Cela crée une liste de sept couleurs. Si le nombre de couleurs de la liste de la valeur rule-color dépasse le nombre de gouttières entre colonnes et lignes, les couleurs excédentaires sont ignorées. S'il y a moins de couleurs que de gouttières, la liste de valeurs se répète jusqu'à ce que chaque règle ait une couleur associée. Par exemple, si le conteneur comporte trois colonnes et 18 lignes, la règle de la première gouttière de colonne est bleue et la deuxième est jaune. Pour les règles de ligne, la séquence se répète, les première, huitième et quinzième règles de ligne étant bleues.

Répétition automatique des couleurs

La fonction repeat() accepte également auto comme premier argument au lieu d'un entier. Avec auto, les valeurs <color> fournies comme arguments suivants sont répétées autant de fois que nécessaire pour remplir les valeurs des règles de colonne et de ligne qui ne sont pas explicitement définies par d'autres composants de la valeur.

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

Dans ce cas, les premières règles de colonne et de ligne sont bleues, les dernières sont rouges et toutes les autres sont jaunes. Tant qu'il y a au moins deux règles dans une direction, la première règle reste bleue et la dernière reste rouge. Toutes les autres règles sont jaunes, ce qui signifie que 2 ou 3 colonnes et lignes ne produisent aucune ligne jaune.

Le mot-clé auto dans repeat() crée un auto-répéteur qui complète les valeurs des couleurs des règles qui n'en reçoivent pas autrement, évitant la mise en cycle de la liste. Une valeur rule-color peut contenir au maximum un repeat(auto, <color>).

Définition formelle

Syntaxe formelle

rule-color = 
  <'column-rule-color'>  

<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, vous définissez une seule <color> pour les lignes tracées entre les colonnes et les lignes d'éléments dans un conteneur grille.

HTML

Nous créons une liste de 75 éléments. La plupart du HTML est masqué pour plus de concision.

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>74</li>
  <li>75</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li>52</li>
  <li>53</li>
  <li>54</li>
  <li>55</li>
  <li>56</li>
  <li>57</li>
  <li>58</li>
  <li>59</li>
  <li>60</li>
  <li>61</li>
  <li>62</li>
  <li>63</li>
  <li>64</li>
  <li>65</li>
  <li>66</li>
  <li>67</li>
  <li>68</li>
  <li>69</li>
  <li>70</li>
  <li>71</li>
  <li>72</li>
  <li>73</li>
  <li>74</li>
  <li>75</li>
</ul>

CSS

Nous définissons la liste non ordonnée comme un conteneur à 10 colonnes, en créant les colonnes et les lignes avec la propriété grid-template-columns. Nous incluons un gap de 5px pour fournir assez d'espace entre les colonnes et les lignes pour notre règle en pointillés de 3px, et définissons list-style-type sur none pour supprimer les puces.

Nous incluons un gap de 5px pour fournir assez d'espace entre les éléments pour notre règle en pointillés moyens. Nous définissons rule-color sur #22BB22, une valeur verte <hex-color> :

ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  list-style-type: none;
  gap: 5px;
  rule-style: dashed;
  rule-width: medium;

  rule-color: #22bb22;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

@layer no-support {
  @supports not (rule-color: red) {
    body::before {
      content: "Votre navigateur ne prend pas en charge la propriété rule-color";
      background-color: wheat;
      text-align: center;
      padding: 1rem 0;

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

Résultat

Plusieurs valeurs de couleur

Cet exemple montre la déclaration de plusieurs couleurs et la manière dont les valeurs se répètent lorsque la liste de couleurs contient moins de valeurs que de gouttières entre colonnes et lignes.

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

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

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

ul {
  rule-color: blue, yellow, red;
}

Résultat

Il y a neuf gouttières de colonnes et six gouttières de lignes, mais seulement trois couleurs dans notre liste de couleurs, qui se répète donc, les première, quatrième et septième lignes étant bleues.

Utiliser la fonction repeat()

Cet exemple montre l'utilisation de la fonction repeat() dans la valeur de la propriété rule-color et la manière dont cette fonction aide à éviter que les valeurs complexes deviennent difficiles à gérer.

CSS

Pour montrer comment les valeurs peuvent devenir complexes et l'utilité de la fonction repeat(), nous déclarons deux propriétés personnalisées, que nous utilisons dans quatre déclarations de fonction de couleur color-mix() pour créer des couleurs bleue, rougeâtre, sarcelle et jaune. Les couleurs rougeâtre et sarcelle de color-mix() se trouvent dans une fonction repeat(), réglée pour se répéter 3 fois.

Nous ajoutons également une bordure autour de chaque élément de la grille afin de voir la règle au milieu de la gouttière entre les colonnes et les lignes.

ul {
  --base: yellow;
  --mixin: blue;

  rule-color:
    color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
    repeat(
      3,
      color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin)),
      color-mix(in lch increasing hue, var(--base) 58%, var(--mixin))
    ),
    color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin));
}

Résultat

La grille comporte 10 colonnes et 7 lignes, créant 9 gouttières de colonnes et 6 gouttières de lignes. La fonction repeat() répète trois fois les deux couleurs mélangées qu'elle contient, créant une liste de huit couleurs au total. Même si beaucoup de CSS est nécessaire pour créer les quatre couleurs, nous n'avons pas à écrire les huit fonctions color-mix(). Comme il y a plus de gouttières de colonnes que de couleurs dans la liste, les couleurs se répètent pour les gouttières de colonnes. Comme il y a moins de gouttières de lignes que de couleurs, les deux dernières couleurs de la liste ne sont pas utilisées pour les gouttières de lignes.

Utiliser auto dans repeat()

Cet exemple montre l'utilisation de 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 remplaçons la valeur de 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 black.

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

Résultat

Même s'il y a plus de lignes de règle de colonne que de lignes de règle de ligne, la valeur <auto-repeat-line-color> permet de créer cet effet symétrique.

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

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <color>
• La propriété rule-width
• La propriété rule-style
• La propriété row-rule-color
• La propriété column-rule-color
• La propriété raccourcie rule
• Le module des espaces CSS