Décorations de lacunes : désormais disponibles dans Chromium

Javier Contreras

Sam Davis Omekara

Publié le : 15 mai 2026

Les décorations d'espaces CSS sont disponibles dans Chrome et Edge à partir de la version 149. Mettez en forme les espaces entre les mises en page en grille, Flexbox et multicolonne sans utiliser de bordures ni de pseudo-éléments. Cette fonctionnalité a été développée en collaboration entre les équipes Microsoft Edge et Google Chrome.

Problème

Il a toujours fallu trouver des solutions de contournement pour styliser les espaces entre les éléments de mise en page. Bordures sur des éléments individuels, pseudo-éléments, hacks d'arrière-plan. Ces approches ont un coût :

• Ils dépendent de la structure. Ajouter un séparateur visuel signifie modifier votre balisage ou écrire des sélecteurs pour des éléments spécifiques.
• Ils nuisent à l'accessibilité. Des éléments DOM supplémentaires s'affichent dans l'arborescence d'accessibilité alors qu'ils ne devraient pas.
• Elles sont difficiles à gérer. Les mises en page responsives ne respectent pas les hypothèses sur lesquelles reposait le style de vos espaces.
• Elles nuisent aux performances. Plus il y a de nœuds DOM, plus la mise en page est complexe.
• L'ergonomie de création est mauvaise. Des calculs géométriques complexes étaient souvent nécessaires pour que tout fonctionne correctement.

La propriété column-rule gère les décorations d'espaces pour les mises en page multicolonnes, mais les grilles et les flexbox ne disposaient pas auparavant de fonctionnalités équivalentes.

La solution

Les conteneurs de grille et Flexbox acceptent désormais column-rule. Une nouvelle propriété row-rule gère les espaces horizontaux. Ces décorations sont purement visuelles et n'affectent pas les mises en page existantes. Si vous utilisez la propriété column-rule dans des mises en page multicolonnes, le comportement existant reste le même.

Par exemple, voici un conteneur flex avec trois panneaux utilisant une liste de styles pour ses règles de colonne et de ligne :

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

Comme illustré dans cet exemple, row-rule et column-rule acceptent la même forme abrégée pour la largeur, le style et la couleur. Utilisez le raccourci rule pour définir les deux à la fois.

Nouvelles propriétés

Cependant, nous n'avons pas simplement ajouté column-rule à d'autres modes de mise en page et ajouté l'équivalent row. Nous avons également introduit des commandes permettant d'affiner vos décorations : comment elles se cassent aux intersections, à quelle distance elles sont insérées à partir des bords des espaces, quand elles apparaissent par rapport aux éléments et comment varier les styles dans les espaces. La largeur, la couleur et les marges intérieures des règles peuvent également être animées.

Syntaxe de repeat()

Les décorations d'espacement sont compatibles avec repeat() pour leurs valeurs de largeur, de style et de couleur. Cela vous permet de varier les décorations dans les espaces vides des Shorts, de la même manière que la syntaxe repeat() utilisée pour les définitions de pistes dans la grille :

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

Cela donne aux deux premiers espaces entre les lignes une règle de 1 px et au troisième une règle de 4 px, en effectuant une rotation s'il y a plus d'espaces que de valeurs. Vous pouvez également transmettre plusieurs valeurs directement sans repeat(). Par exemple, vous pouvez alterner les styles de règles de ligne pour les limites d'heure et de demi-heure dans un calendrier :

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

Contrôler les sauts de décoration

Les propriétés column-rule-break et row-rule-break contrôlent le comportement des décorations aux intersections des espaces :

• normal (par défaut) : le comportement dépend du type de conteneur. Pour en savoir plus, consultez les spécifications.
• none : les décorations s'étendent en continu au-delà des intersections.
• intersection : les décorations s'interrompent là où les espaces entre les lignes et les colonnes se croisent.

Par exemple, si vous définissez rule-break sur intersection dans un conteneur de grille, les règles s'arrêtent aux intersections des espaces plutôt que de continuer :

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}

Si vous définissez rule-break sur none, les règles s'exécutent en continu par le biais d'intersections :

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

Vous pouvez essayer cette valeur dans le playground interactif.

Étendre ou réduire les décorations

Les propriétés column-rule-inset et row-rule-inset contrôlent la distance sur laquelle les décorations s'étendent dans un espace. Vous pouvez définir des encarts sur tous les côtés à la fois avec la forme abrégée, ou cibler des encarts de manière asymétrique avec column-rule-inset-cap (pour les points de terminaison sans espaces croisés) et column-rule-inset-junction (pour les points de terminaison qui croisent d'autres espaces).

Les valeurs peuvent être des longueurs, des pourcentages ou le mot clé overlap-join, qui joint les décorations d'écart dans les coins. Par exemple, si vous définissez rule-inset sur 5 px, toutes les décorations sont réduites de 5 px vers l'intérieur :

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}

Si vous définissez rule-inset-cap sur 0 px et rule-inset-junction sur 10 px, les décorations sont alignées sur les bords du conteneur, mais en retrait au niveau des intersections. La démonstration du tableau de bord présentée précédemment utilise cette approche, et les encarts s'animent au passage de la souris :

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

Visibilité

Les propriétés column-rule-visibility-items et row-rule-visibility-items contrôlent le moment où les règles s'affichent en fonction de l'adjacence des éléments :

• normal (par défaut) : dépend du type de conteneur.
• all : les règles s'affichent dans chaque espace, même vide.
• around : les règles s'affichent partout où se trouvent un ou plusieurs éléments adjacents.
• between : les règles n'apparaissent qu'entre deux éléments adjacents.

Le raccourci rule-visibility-items permet de définir les deux à la fois. Si vous définissez rule-visibility-items sur between, les règles ne s'affichent qu'entre les éléments adjacents :

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}

En revanche, si vous définissez rule-visibility-items sur all, les règles s'affichent dans chaque espace, même ceux sans éléments adjacents :

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

Modifiez la valeur dans la démo en direct pour voir la différence.

Animer des décorations

La largeur, la couleur et les encarts des règles peuvent être animés. Vous pouvez les faire passer en douceur d'un état à un autre, par exemple au survol. La démo du tableau de bord présentée précédemment effectue une transition des couleurs et des marges intérieures des règles au passage de la souris :

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

Démonstrations

Toutes les démonstrations présentées dans cet article sont disponibles sur le site de démonstration Edge.

L'article de blog sur la version d'essai pour les développeurs inclut plusieurs autres démonstrations, y compris un bac à sable interactif, un menu burger, une mise en page de notebook et une mise en page de style magazine avec une grille de sudoku.

Modifications apportées depuis la version d'essai pour les développeurs

Si vous avez essayé les décorations d'espaces pendant la version bêta pour les développeurs (Chrome 139), notez les modifications suivantes :

• Cette fonctionnalité est disponible par défaut. Aucun flag n'est nécessaire.
• Certains noms de propriétés ont été mis à jour pour correspondre à la dernière spécification (par exemple, column-rule-outset et row-rule-outset sont devenus column-rule-inset et row-rule-inset).
• Les propriétés column-rule-visibility-items et row-rule-visibility-items ont été ajoutées.
• La prise en charge des animations a été ajoutée.

Utiliser les décorations de lacunes dès aujourd'hui

Les décorations d'espaces vides fonctionnent dans Chrome et Edge à partir de la version 149. Si vos décorations d'espaces sont purement décoratives, la fonctionnalité est une amélioration progressive. Dans les navigateurs non compatibles, les espaces s'affichent normalement, sans décorations visibles. Un polyfill est en cours de développement pour les navigateurs qui ne sont pas encore compatibles.

Signalez les bugs dans l'outil de suivi des problèmes Chromium. Pour en savoir plus, consultez la spécification CSS Gap Decorations.

Liens utiles

• Spécifications des décorations de l'espace CSS
• Article de blog sur la version d'essai pour les développeurs (Chrome 139)
• Annonce Edge
• Explication sur GitHub