logo oujood
🔍

les propriétés css: column-rule, column-rule-color, column-rule-style & column-rule-width

Sommaire de ce chapitre :

  1. column-rule
  2. column-rule-color
  3. column-rule-style
  4. column-rule-width

Définition et utilisation da la propriété css column-rule

La propriété column-rule définit la largeur, le style et la couleur de la règle entre les colonnes.

Cette propriété est un raccourci des propriétés :
column-rule-width
column-rule-style (obligatoire)
column-rule-color
Si column-rule-color est omis, la couleur appliquée sera celle du texte.

La Syntaxe CSS 
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
Valeurs par défaut medium none color
Inherited: non
Animable : oui voir les propriétés individuelles En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnRule="3px outset blue"

Valeurs de la propriété

Voir les propriétés :column-rule-width column-rule-style column-rule-color.

Exemple    📋 Copier le code 

div {
  column-rule: 4px double #ff00ff;
}

Cet exemple pourait être écrit autrement en separant les tois régles(column-rule-width, column-rule-style et column-rule-color) comme dans ce qui suit.

Définition et utilisation da la propriété css column-rule-color

La propriété column-rule-color spécifie la couleur de la règle entre les colonnes.
La Syntaxe CSS column-rule-color
column-rule-color: color|initial|inherit;
Valeurs par défautla couleur du texte de l'élément
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnRuleColor="#ff0000"

Valeurs de la propriété column-rule-color

color : Spécifie la couleur de la règle. Consultez le tutoriel sur les couleurs CSS pour obtenir une liste complète des valeurs de couleur possibles.
initial: Définit cette propriété à sa valeur par défaut.
inherit: Hérite cette propriété de son élément parent.

Exemple    📋 Copier le code 

div {
  column-rule-color: #ff0000;
}

Définition et utilisation da la propriété css column-rule-style

La propriété column-rule-style spécifie le style de la règle entre les colonnes. La Syntaxe CSS column-rule-style
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valeurs par défautnone
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnRuleStyle="dotted"

Valeurs de la propriété column-rule-style

none : Valeur par défaut. Ne définit aucune règle
hidden : Définit une règle cachée
dotted : Définit une règle en pointillés
dashed : Définit une règle en pointillés
solid : Définit une règle solide
double : Définit une règle double
groove : Spécifie une règle rainurée en 3D. L'effet dépend des valeurs de largeur et de couleur
ridge : Spécifie une règle striée en 3D. L'effet dépend de la largeur et des valeurs de couleur
inset : Spécifie une règle à encastrement 3D. L'effet dépend des valeurs de largeur et de couleur
outset : Spécifie une règle de départ en 3D. L'effet dépend des valeurs de largeur et de couleur
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.

Exemple    📋 Copier le code 

div {
  column-rule-style: dotted;
}

Définition et utilisation da la propriété css column-rule-width

La propriété column-rule-width spécifie la largeur de la règle entre les colonnes. La Syntaxe CSS column-rule-width
column-rule-width: medium|thin|thick|length|initial|inherit;
Valeurs par défautmedium
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnRuleWidth="10px"

Valeurs de la propriété column-rule-width

medium : Valeur par défaut. Définit une règle moyenne
thin : Définit une règle fine
thick : Définit une règle épaisse
length : Spécifie la largeur de la règle
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.

Exemple    📋 Copier le code 

div {
  column-rule-width: 10px;
}

Prise en charge de la propriété css dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion 50
4 -webkit- 		10 52
2 -moz- 		9
3.1 -webkit- 		37
15 -webkit-
11.1 -o-


- Liste des propriétés css -

Animation de la règle de la colonne : column-rule

Exemple    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
        <title>Animation de la règle de la colonne</title>
 <style> 
#monDIV {
  border: 1px solid black;
  column-count: 3;
  column-rule: 1px outset red;
  animation: monAnimation 5s infinite;
}

@keyframes monAnimation {
  50% {
    column-rule: 50px outset #00ffff;
  }
}
</style>
</head>
<body>

<h1>Animation de la règle de la colonne : column-rule</h1>

<p>Changez progressivement la règle entre les colonnes :<p>
<div id="monDIV">
Tristique et egestas quis ipsum. Eget aliquet nibh praesent tristique. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Odio euismod lacinia at quis risus sed vulputate odio ut. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Aliquet eget sit amet tellus cras. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Ultricies integer quis auctor elit sed vulputate mi sit. Adipiscing vitae proin sagittis nisl. Habitant morbi tristique senectus et netus et malesuada fames ac. Arcu felis bibendum ut tristique et. Purus ut faucibus pulvinar elementum. Lacus laoreet non curabitur gravida arcu. Velit euismod in pellentesque massa. Arcu non odio euismod lacinia at quis risus sed vulputate.
</div>

<p>La propriété column-rule est un raccourci pour toutes les propriétés column-rule.</p>
<p>Les propriétés column-rule-color et column-rule-width sont <em>animatable</em> en CSS.</p>

</body>
</html>