Propriété CSS column-rule-width

Exemple interactif

column-rule-width: thin;

column-rule-width: 4px;

column-rule-width: thin, medium, thick;

column-rule-width: repeat(2, 1px, thick), 10px;

column-rule-width: 10px, repeat(auto, 1px, 2px), 10px;

<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: 6;
  column-rule-style: solid;
  column-rule-color: teal;
  gap: 7px;
}

Syntaxe

/* Valeurs avec des mots-clés */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
column-rule-width: thin, medium, thick;
column-rule-width: thick, repeat(5, thin), thick;
column-rule-width: thick, repeat(auto, thin, medium), thick;

/* Valeurs de type <length> */
column-rule-width: 0.1em;
column-rule-width: 5px;
column-rule-width: 1px, 3px, 5px;
column-rule-width: 0.1rem, repeat(auto, 1px), 10px, 0.5rem;
column-rule-width: 5px, repeat(5, 1px, 3px), 5px;

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

Valeurs

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

<line-width>

Une largeur de ligne (<line-width>) : Cela peut être l'un des mots-clés thin, medium ou thick, ou une valeur positive de type <length>, représentant la largeur de la ligne. La valeur par défaut est medium.

<repeat-line-width>

La fonction repeat(), avec le premier argument étant un entier (<integer>) de 1 ou plus, et une ou plusieurs valeurs <line-width> comme arguments suivants. L'entier définit combien de fois les valeurs <line-width> doivent être répétées.

<auto-repeat-line-width>

La fonction repeat(), avec auto comme premier argument et une ou plusieurs valeurs <line-width> comme arguments suivants. Les valeurs <line-width> 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 définies explicitement par d'autres composants de la valeur de la propriété.

Description

La propriété column-rule-width définit la largeur des lignes de règle de colonne tracées dans les gouttières entre les colonnes adjacentes dans les conteneurs à plusieurs colonnes, flexibles et grille contenant plus d'une colonne.

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

La règle de largeur de colonne (column-rule-width), ainsi que les propriétés column-rule-color et column-rule-style, peut également être définie à l'aide du raccourci column-rule, tandis que rule-width est un raccourci qui définit à la fois la column-rule-width et les propriétés row-rule-width.

Une largeur de ligne (<line-width>) peut être déclarée comme toute valeur CSS valide de type <line-width> : les mots-clés thin, medium ou thick, ou une valeur positive de type <length>. Les valeurs en pourcentage sont invalides.

Si la valeur de la propriété ne consiste qu'en une seule largeur de ligne (<line-width>), toutes les règles de colonne sont cette largeur. Par exemple, si nous déclarons ce qui suit, toutes les règles de colonne ont une largeur de 2px :

column-rule-width: 2px;

Lorsque plus d'une largeur de ligne (<line-width>) est déclarée, elles sont appliquées aux règles de colonne dans l'ordre défini. S'il y a plus de règles de colonne que de valeurs <line-width>, la liste des largeurs de ligne est répétée jusqu'à ce que chaque règle ait une largeur. Par exemple, si nous déclarons ce qui suit, toutes les règles impaires sont thick, et toutes les règles paires sont 0.25rem.

column-rule-width: thick, 0.25rem;

Répéter les largeurs 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 <line-width> passées comme arguments suivants le nombre de fois défini. Cela permet de répéter la même largeur un certain nombre de fois sans répéter plusieurs fois le même <line-width>. Les déclarations suivantes sont équivalentes :

column-rule-width: 1rem, thick, thin, thick, thin, thick, thin;
column-rule-width: 1rem, repeat(3, thick, thin);

Vous pouvez utiliser n'importe quelle valeur <line-width>, y compris les propriétés personnalisées qui se résolvent en une largeur de ligne (<line-width>). L'utilisation de repeat() peut rendre les valeurs plus faciles à écrire, en particulier lors de l'utilisation de calculs de longueurs complexes. Elle permet d'écrire un motif récurrent en utilisant une seule fonction, quel que soit le nombre de colonnes. Les déclarations suivantes sont équivalentes :

column-rule-width:
  1rem, min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondaire) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondaire) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondaire) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondaire) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondaire) - 30px)), thin;
column-rule-width:
  1rem,
  repeat(
    5,
    min(calc(var(--base) - 3px), 10px),
    abs(calc(var(--secondaire) - 30px))
  ),
  thin;

Cela crée une liste de 12 largeurs. Si le nombre de largeurs dans la liste de largeurs de la valeur column-rule-width dépasse le nombre de gouttières entre les colonnes, les largeurs excédentaires sont ignorées. Si le conteneur a trois colonnes, la règle dans la première gouttière a une largeur de 1rem, et la seconde est déterminée par la fonction min().

Si le nombre de gouttières est supérieur au nombre de largeurs, la liste des largeurs est répétée. Si le conteneur a 13 ou 25 colonnes, cette séquence de largeurs est répétée une ou deux fois, respectivement, la dernière règle étant thin. Pour tout autre nombre de colonnes, jusqu'à 25, la dernière règle n'est pas thin.

Répéter automatiquement les largeurs de ligne

La fonction repeat() accepte également auto comme premier argument au lieu d'un entier positif. Avec auto comme premier argument, la liste des valeurs <line-width> passées en arguments suivants est répétée autant de fois que nécessaire pour remplir les valeurs de toutes les règles de colonne qui ne sont pas définies explicitement par d'autres composants de la valeur de la propriété.

column-rule-width: 10px, repeat(auto, thin), 10px;

Dans ce cas, la première règle de colonne est 10px, la dernière est 10px, et toutes les autres sont thin. Peu importe si le conteneur a 3, 6, 11, 16 ou 21 colonnes, les première et dernière colonnes font toujours 10px. Cela signifie que, s'il n'y a que 2 ou 3 colonnes, aucune règle de colonne n'a la largeur thin.

Le mot-clé auto dans la fonction repeat() crée un répéteur automatique qui fournit des valeurs aux largeurs de ligne des règles de ligne qui autrement ne reçoivent aucune valeur des autres parties de la liste, ce qui empêche la liste de recommencer. Une valeur column-rule-width peut inclure au maximum un repeat(auto, <line-width>).

Définition formelle

Syntaxe formelle

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

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

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

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

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

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

<integer> = 
  <number-token>  

Exemples

Exemple simple

Cet exemple montre l'utilisation d'une seule valeur de mot-clé, définissant toutes les règles de colonne à la même taille.

HTML

Nous incluons un paragraphe de texte:

<p>
  Ceci est un texte réparti en trois colonnes. La propriété `column-rule-width`
  est utilisée pour modifier la largeur de la ligne tracée entre les colonnes.
  N'est-ce pas merveilleux ?
</p>

CSS

Nous créons un conteneur à plusieurs colonnes avec la propriété column-count. Comme la propriété column-rule-style a pour valeur par défaut none, nous devons la définir sur une valeur visible pour que les règles de colonne soient tracées. Nous définissons ensuite la column-rule-width sur thick, en laissant la propriété column-rule-color par défaut sur currentcolor.

p {
  column-count: 3;
  column-rule-style: solid;

  column-rule-width: thick;
}

Résultat

Dans les dispositions à plusieurs colonnes, la propriété gap a pour valeur par défaut 1em, ce qui est plus large que notre column-rule-width, donc les lignes ne sont pas tracées sur notre contenu.

Plusieurs valeurs

Cet exemple montre l'utilisation de plusieurs valeurs pour la propriété column-rule-width. Il montre également que les règles qui débordent des gouttières sont peintes derrière le contenu.

HTML

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

<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 définissons la liste comme un conteneur flexible, créant des colonnes en définissant la direction du conteneur (flex-direction) sur row à l'aide du raccourci flex-flow. Nous incluons une column-rule-width avec dix valeurs <line-width>, chacune plus grande que la précédente.

ul {
  display: flex;
  flex-flow: row;
  list-style-type: none;
  column-rule-style: solid;
  column-rule-color: teal;

  column-rule-width: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px;
}

Résultat

Comme il y a plus de valeurs (10) que de gouttières (8), les valeurs 9px et 10px ne sont pas utilisées.

La propriété gap a pour valeur par défaut normal, ce qui se résout à 0 dans les conteneurs flexibles. La propriété column-rule-width ne définit que la largeur d'une ligne tracée et n'a pas d'impact sur la mise en page. Les lignes sont tracées derrière le contenu.

Valeurs répétées

Cet exemple montre comment, lorsque la liste des largeurs contient moins de valeurs que de règles de colonne, les valeurs sont répétées.

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

ul {
  column-rule-width: 1px, 5px, 10px;
}

Utiliser la fonction repeat()

Cet exemple montre l'utilisation de la fonction repeat() dans la valeur de la propriété column-rule-width et comment cette fonction peut aider à réduire la verbosité des déclarations de valeurs.

Nous utilisons le même HTML et le même CSS que dans les exemples précédents. Pour démontrer comment les valeurs peuvent devenir verbeuses et l'utilité de la fonction repeat(), nous déclarons deux propriétés personnalisées, que nous utilisons dans les déclarations de fonction repeat(). La fonction repeat() définit la liste de deux valeurs <line-width> à répéter 3 fois.

ul {
  --base: 0.5vw;
  --secondaire: 1vw;
  column-rule-width:
    15px,
    repeat(
      4,
      min(calc(var(--secondaire) + 3px), 10px),
      abs(calc(var(--base) - 2px))
    ),
    15px;
}

Le conteneur flexible comporte neuf colonnes, donc huit gouttières. La fonction repeat() répète quatre fois deux valeurs de largeur, ce qui crée une liste de dix valeurs de largeur. Comme il y a moins de gouttières de colonne que de largeurs totales, les deux dernières valeurs de la liste sont supprimées.

Utiliser auto dans repeat()

Cet exemple montre l'utilisation de l'argument auto à la place d'un entier dans la fonction repeat().

En utilisant repeat(auto, <line-width>), nous définissons toutes les règles de colonne sur 1px, à l'exception de la première et de la dernière, que nous définissons sur 5px.

ul {
  column-rule-width: 5px, repeat(auto, 1px), 5px;
}

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

Spécifications

Compatibilité des navigateurs

• La propriété column-rule-color
• La propriété column-rule-style
• La propriété raccourcie column-rule
• La propriété row-rule-width
• La propriété raccourcie rule-width
• La propriété raccourcie rule
• Définir les espaces CSS
• Le module d'espacement CSS