Column-rule-outset et row-rule-outset, propriétés CSS.

Schéma de la syntaxe de column-rule-outset.

Description des termes utilisés sur le schéma :

• length est une valeur numérique positive ou négative suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport aux dimensions du gap.

Description de la propriété column-rule-outset.

⚠

Ces propriétés sont expérimentales. Elle sont décrites dans le module css-gaps. Pour l'instant seuls Chrome   et Edge   les reconnaissent.

column-rule-outset gère les débordements des filets de séparation des colonnes ; row-rule-outset celui des lignes. Quant à rule-outset, elle gère aussi bien les débordements du filets des lignes que de celui des colonnes, mais pour l'instant, cette troisième propriété n'est pas traitée par les navigateurs. Ces propriétés s'appliquent aux conteneurs grille et aux conteneurs flex.

Pour que les débordements soient visibles au niveau des intersections, la propriété rule-break doit être positionnée sur intersection. Voici à quoi ressemblent ces débordements. ⚠ Cela ne fonctionne pas sur Firefox  .

Consultez la page sur la propriété rule pour une synthèse des propriétés relatives aux filets.

Valeurs pour column-rule-outset.

⚠ La propriété résumée rule-outset n'est pas reconnue par les navigateurs, même par ceux qui traitent correctement row-rule-outset et column-rule-outset.

• row-rule-outset: 3px; column-rule-outset: 3px; rule-outset: 3px;

  Une valeur numérique positive ou négative, suivie d'une des unités de dimension ou un pourcentage. S'il s'agit d'un pourcentage, celui-ci est calculé par rapport à la largeur du gap (défini par gap).

  Nous donnons ci-dessous les exemples pour row-rule-outset. Sur les bords du conteneur, on voit nettement le filets de séparation qui débordent (valeur positive). Avec une valeur négative, ils auraient été en retrait.
  Sur les intersections avec les filets de séparation des colonnes, nous avons dû positionner la propriété rule-break sur intersection pour que l'effet soit visible.

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  row-rule-outset:10px;

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  row-rule-outset:-5px;

  Voici également des exemples avec les deux propriétés row-rule-outset et column-rule-outset positionnées à une même valeur en pourcentage. Si le comportement aux intersections ligne/colonne est bien le même que tout à l'heure, par contre, au niveau du contour, il n'y a plus d'effet.

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  row-rule-outset:100%;
column-rule-outset:100%;

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  row-rule-outset:-100px;
column-rule-outset:-100%;
• column-rule-outset: initial; (50%) column-rule-outset: inherit; column-rule-outset: revert; column-rule-outset: revertLayer; column-rule-outset: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de column-rule-outset.

Les propriétés row-rule-outset et column-rule-outset s'animent très bien, et de façon progressive. Il semble qu'il y ait un petit bogue : les extrémités des filets ne sont pas effacées lorsque la longueur du filet se réduit.

Exemple interactif avec la propriété column-rule-outset.

Sur le simulateur, construit à partir d'une grille, le padding du conteneur a été fixé à 0, pour que les effets de rule-outset soient bien visibles.

Compatibilité des navigateurs avec column-rule-outset.

La propriété rule-outset n'est pour l'instant pas reconnue (2025). Les propriétés row-rule-outset et column-rule-outset sont traitées par Edge   et Chrome  .

Histoire de la propriété column-rule-outset.

• Module CSS - Décoration des espaces - Niveau 1.

  Introduction des propriétés column-rule-outset et row-rule-outset, ainsi que de la propriété résumée rule-outset.
  

  17 Avril 2025

  Document de travail.

  

  

  

Voir aussi, à propos des décorations d'espaces.

Propriétés :