Rule-inset - Propriété CSS

Schéma de la syntaxe de rule-inset.

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

• l1, l2, l3 et l4 quatre valeurs numériques suivies d'une des unités de dimension.
  l1 est la valeur pour row-rule-inset-cap-start et column-rule-inset-cap-start,
  l2 est la valeur pour row-rule-inset-cap-end et column-rule-inset-cap-end,
  l3 est la valeur pour row-rule-inset-junction-start et column-rule-inset-junction-start,
  l4 est la valeur pour row-rule-inset-junction-end et column-rule-inset-junction-end,
  Toutes ces valeurs sauf l1 sont optionnelles.
• % est un pourcentage calculé sur l'espacement initial des filets.

Description de la propriété rule-inset.

⚠

Cette propriété est expérimentale. Elle est décrite dans la spécification "CSS Gap Decorations Module". Pour l'instant seul Edge  , Chrome   et quelques navigateurs sur mobile la reconnaissent.

La propriété rule-inset décrit les espaces à laisser aux extrémités de chacun des filets. Ces espaces sont de deux types :
  - cap lorsque cette extrémité est à la fin d'un filet.
  - junction lorsque deux filets ses rencontrent.
Chacun de ces types d'espace est ensuite décliné en start et end suivant que le trait commence ou se termine à cet endroit. Ces espaces sont visibles lorsque la propriété rule-break est positionnée sur intersection. Ceci est représenté sur le dessin ci-dessous.

Dénomination des extrémités de filets sur une grille complète.
CS : Cap Start - CE : Cap End.
JS : Junction Start - JE : Junction End.

Dénomination des extrémités de filets sur une grille incomplète.
CS : Cap Start - CE : Cap End.
JS : Junction Start - JE : Junction End.

rule-inset est une propriété résumée, enfin pas tout à fait car elle applique la même valeur aux espaces sur les lignes qu'aux espaces sur les colonnes. Mais il y a beaucoup de propriété détaillées, huit en tout, avec quantité de propriétés résumées sur plusieurs niveaux.
Le premier niveau concerne les propriétés qui appliquent la même valeur aux extrémités start et end.
Le deuxième niveau concerne les propriétés qui appliquent la même valeur aux intersection cap et junction.
Enfin la propriété du troisième niveau applique les valeurs aussi bien aux lignes qu'aux colonnes.

Mais il y a une autre façon de grouper ces propriétés, ce qui donne encore d'autres propriétés résumées. Au premier niveau les propriétés appliquent la même valeur aux intersection cap et junction. Au deuxième niveau les propriétés s'appliquent aussi bien aux lignes qu'aux colonnes.

Prise en charge de la langue.

Toutes ces propriétés sont naturellement sensibles au mode d'écriture de la langue, aussi bien dans la direction (ltr ou rtl) que dans le sens d'écriture (horizontal ou vertical). Sur les exemples ci-dessous, les grilles ont toutes eu la même valeur pour rule-inset mais leur mode d'écriture est différent.

Valeurs pour rule-inset.

⚠ Nos exemples ne fonctionnement bien sûr que sur les navigateurs compatibles (voir le tableau ci-dessous).

• rule-inset: 25px 10px / 10px 5px; l1 l2 l3 l4

  rule-inset accepte jusqu'à 4 valeurs avec la syntaxe ci-dessus. Ce quatre valeurs peuvent être positives, négatives ou nulles mais doivent être suivies d'une des unités de dimension. Cela peut être aussi des pourcentages, calculés par rapport à l'espace initial entre les traits.

  • l1 correspond aux espaces notés CS (Cap Start).
  • l2 correspond aux espaces notés CE (Cap End). Par défaut ils sont pris égaux aux espaces l1.
  • l3 correspond aux espaces notés JS (Junction Start). Par défaut ils sont pris égaux aux espaces l1.
  • l4 correspond aux espaces notés JE (Junction End). Par défaut ils sont pris égaux aux espaces l3 si ce dernier est indiqué, sinon ils sont pris égaux à l2.

  Rappel : la propriété rule-break doit avoir reçu la valeur intersection.

  rule-inset:10px 0px / 0px 0px;

  rule-inset:0px 10px / 0px 0px;

  rule-inset:0px 0px / 10px 0px;

  rule-inset:0px 0px / 0px 10px;
• rule-inset: overlap-join;

  N'importe quelle valeur peut être remplacée par le mot-clé overlap-join. Sur un cap la valeur vaut 0. Sur une jonction la valeur overlap-join fait se toucher les filets.

  rule-inset:overlap-join 0px / 0px 0px;
• rule-inset: initial; (0) rule-inset: inherit; rule-inset: revert; rule-inset: revert-layer; rule-inset: revert-rule; rule-inset: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de rule-inset.

Il est possible de réaliser de nombreux effets avec l'animation de rule-inset ou des propriété détaillées correspondantes. Voici un exemple.

Exemple interactif avec la propriété rule-inset.

Vous pouvez jouer avec les valeurs des propriétés pour row-rule-inset et column-rule-inset et observer le résultat sur la grille ci-dessous.

Compatibilité des navigateurs avec rule-inset.

Pour l'instant (2026), seuls deux grands navigateurs traitent la propriété rule-inset : Chrome  , Edge   et quelques navigateurs sur mobile.

1

Propriété
rule-inset

2

Propriété
row-rule-inset

3

Propriété
column-rule-inset

Estimation de la prise en charge globale.

57%

57%

57%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété rule-inset.

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

  Ce module reprend les règles qui définissent les filets entre les colonnes dans un conteneur multi-colonnes (grille, flex-box, etc.). Il étend ces possibilités aux filets entre les éléments disposés sur plusieurs lignes, ce qui permet d'utiliser ces fonctionnalités sur d'autres types de conteneurs. Plusieurs propriétés définissent comment ces filets doivent être dessinés.

  Concernant rule-inset Définition de la propriété rule-inset et de toutes les autres propriétés relatives à l'espacement aux extrémités des filets de séparation de lignes et/ou de colonnes.
  

  17 Avril 2025

  Document de travail.

  

  

  

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

Le module CSS - Décorations des espaces. regroupe les propriétés qui concerne les filets de décoration, y compris celle qui étaient au préalable dans le "Module CSS - multi-colonnes" (comme celles dont le nom commence par column-rule...).
Voici ces propriétés :

Propriétés :