Propriété CSS column-rule

Column-rule est une propriété raccourcie, qui définit la style, la largeur et la couleur du règle entre les colonnes. Elle est spécifiée par les propriétés column-rule-style, column-rule-width et column-rule-color.

Quelques extensions de la propriété sont ajoutées, telle que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions anciennes d'Opera etc.
Valeur initiale medium none currentColor
Appliquée à medium none currentColor
Héritée Non.
Animable Oui. La couleur et la largeur de column-rule sont animable.
Version CSS3
Syntaxe DOM object.style.columnRule = "5px outset #ccc";

Syntaxe

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 5px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: 5px dotted #ccc;
      column-count: 3;
      column-gap: 30px;
      column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie à 5px dotted gray.</p>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Vous pouvez définir seulement une valeur et ça fonctionne encore.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: dashed;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: dashed;
      column-count: 3;
      column-gap: 30px;
      column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie seulement "dashed".</p>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Dans cet exemple, la largeur du règle est 10px, le style est "groove" et la couleur est gris.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 4;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 10px groove #ccc;
      /* Firefox */
      -moz-column-count: 4;
      -moz-column-gap: 30px;
      -moz-column-rule: 10px groove #ccc;
      column-count: 4;
      column-gap: 30px;
      column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie à 10px groove gray.</p>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Valeurs

Valeur Description
column-rule-width Définit la largeur entre les colonnes. La valeur initiale est "medium".
column-rule-style Définit le style du règle entre les colonnes. La valeur initiale est "none".
column-rule-color Définit la couleur du règle. La valeur initiale est la couleur actuelle de l'élément.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

50.0
-webkit-
12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-


Trouvez-vous cela utile?

Articles Associées