Propriété CSS column-rule-style

Exemple interactif

column-rule-style: dotted;

column-rule-style: dashed, dotted;

column-rule-style: repeat(2, inset, outset), double;

column-rule-style: double, repeat(auto, dashed, solid), double;

column-rule-style: hidden;

<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-width: thick;
  column-rule-color: teal;
  gap: 7px;
}

Syntaxe

/* Une seule valeur */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/* Plusieurs valeurs */
column-rule-style: groove, double, dashed;
column-rule-style: solid, repeat(5, ridge), solid;
column-rule-style: dotted, repeat(auto, inset, outset), dotted;

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

Valeurs

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

<line-style>

Un style de ligne (<line-style>) : l'une des valeurs none, hidden, dotted, dashed, solid, double, groove, ridge, inset ou outset. La valeur par défaut est none.

<repeat-line-style>

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

<auto-repeat-line-style>

La fonction repeat(), avec auto comme premier argument et une ou plusieurs valeurs <line-style> comme arguments suivants. Les valeurs <line-style> 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-style définit le style des lignes de séparation tracées dans les espaces entre les colonnes dans les mises en page multi-colonnes, flexible et grille comportant plusieurs colonnes.

La valeur est une liste de composants séparés par des virgules, pouvant inclure les types <line-style>, <repeat-line-style> et <auto-repeat-line-style>.

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

Si la valeur de la propriété ne comporte qu'un seul style de ligne (<line-style>), toutes les règles de colonnes ont ce style. Si nous déclarons ce qui suit, toutes les règles de colonnes sont double :

column-rule-style: double;

Lorsque plus d'un style de ligne (<line-style>) est déclaré, ils sont appliqués aux règles de colonnes dans l'ordre défini. S'il y a plus de règles de colonnes que de valeurs <line-style>, la liste des styles de ligne est répétée jusqu'à ce que chaque règle de colonne ait un style. Si nous déclarons ce qui suit, par exemple, toutes les règles impaires sont double et toutes les règles paires sont groove.

column-rule-style: double, groove;

Répéter les styles 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-style> passées comme arguments suivants le nombre de fois défini. Cela permet de répéter le même style un certain nombre de fois sans répéter la même valeur. Vous pouvez inclure des valeurs de mot-clé <line-style> ou des propriétés personnalisées qui se résolvent en un style de ligne (<line-style>) valide. L'utilisation de repeat() peut rendre les valeurs plus faciles à écrire, permettant aux motifs récurrents d'être écrits à l'aide d'une seule fonction, quel que soit le nombre de colonnes. Les déclarations suivantes sont équivalentes :

column-rule-style: solid, outset, inset, outset, inset;
column-rule-style: solid, repeat(2, outset, inset);

Cela crée une liste de cinq styles. Si le nombre de styles dans la liste de styles de la valeur column-rule-style dépasse le nombre d'espaces entre les colonnes, les styles excédentaires sont ignorés. Si le conteneur a trois colonnes, la règle dans la première gouttière est solid et la deuxième outset.

S'il y a plus de gouttières que de styles, la liste des styles est répétée. Si le conteneur a 6, 11, 16 ou 21 colonnes, cette séquence de styles est répétée une, deux, trois ou quatre fois, respectivement, la dernière règle étant inset.

Répéter automatiquement les styles de ligne

La fonction repeat() accepte également auto comme premier argument au lieu d'un entier positif. Avec auto comme premier argument, les valeurs <line-style> passées comme paramètres 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é.

column-rule-style: solid, repeat(auto, dotted), solid;

Dans ce cas, peu importe si le conteneur a 3, 6, 11, 16 ou 21 colonnes ; la première et la dernière règle de colonne sont toujours solid, et toutes les autres règles de colonne sont dotted. S'il n'y a que 2 ou 3 colonnes, il n'y a pas de règles de colonne en pointillés.

Le mot-clé auto dans la fonction repeat() crée un répéteur automatique qui remplit les valeurs des règles de colonne qui ne reçoivent pas d'autres parties de la liste, empêchant la liste d'être répétée. Une seule occurrence de repeat(auto, <line-style>) est autorisée dans une valeur column-rule-style.

Définition formelle

Syntaxe formelle

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

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

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

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

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

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

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

<integer> = 
  <number-token>  

Exemples

Exemple simple

HTML

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

CSS

p {
  column-count: 3;
  column-rule-style: dashed;
}

Résultat

Plusieurs valeurs

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 un espacement (gap) de 5px pour fournir suffisamment d'espace entre les colonnes pour accueillir notre règle double teal de 3px :

ul {
  display: flex;
  flex-flow: row;
  gap: 5px;
  column-rule-width: 3px;
  column-rule-color: teal;

  column-rule-style:
    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
}

Résultat

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

Valeurs répétées

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

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

ul {
  column-rule-style: solid, groove, double;
}

Utiliser la fonction repeat()

Cet exemple montre l'utilisation de la fonction repeat() dans la valeur de la propriété column-rule-style. Nous utilisons le même HTML et CSS que dans les exemples précédents. Nous incluons une fonction repeat(), définissant la liste de deux valeurs <line-style> à répéter 3 fois.

ul {
  column-rule-style: solid, repeat(3, inset, outset), solid;
}

Le conteneur flexible a six colonnes, donc cinq gouttières. La fonction repeat() répète deux valeurs de style trois fois, créant une liste de huit valeurs de style, donc les trois dernières valeurs de la liste sont ignorées.

Utiliser auto dans repeat()

Cet exemple montre l'utilisation de auto au lieu d'un entier dans la fonction repeat().

En utilisant repeat(auto, <line-style>), nous définissons toutes les règles de colonne sur groove, sauf la première et la dernière, que nous définissons sur solid.

ul {
  column-rule-style: solid, repeat(auto, groove), solid;
}

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

Spécifications

Compatibilité des navigateurs

Voir aussi

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