The Gap Strikes Back : CSS Gap est désormais stylable

• Jusqu’à présent, la propriété CSS gap permettait de créer des espacements, mais il était impossible de styliser directement la zone du gap ; il fallait donc recourir à diverses méthodes de contournement (éléments supplémentaires, bordures, pseudo-éléments, etc.)
• La nouvelle fonctionnalité CSS gap decorations permet désormais, via des propriétés comme row-rule, column-rule, etc., de dessiner directement des lignes (séparateurs) entre les éléments d’une mise en page
• Les décorations peuvent s’appliquer à Grid, Flexbox, Multi-column, et bientôt Masonry, soit tous les grands systèmes de layout, sans markup supplémentaire ni éléments inutiles, avec une amélioration structurelle et visuelle en pur CSS
• La fonctionnalité prend en charge divers styles (épaisseur, couleur, motif, etc.) ainsi que leur répétition/combinaison, avec un contrôle précis via repeat(), outset, paint-order, etc.
• Pour l’instant, elle n’est utilisable que sur les navigateurs basés sur Chromium (Chrome/Edge 139+) avec activation d’un flag, la standardisation et l’extension étant encore en cours

---

Les limites de gap jusque-là, et ce qui change

• Auparavant, il était difficile de styliser la zone du gap, et il fallait ajouter des bordures de séparation ou de faux éléments
• Cette approche entraînait plusieurs inconvénients en matière de dimensions du layout, d’accessibilité et de complexité du markup
• Désormais, le standard gap decorations apparaît et permet d’appliquer des décorations (lignes, etc.) dans les zones d’espacement avec de simples propriétés CSS

Présentation de CSS gap decorations

• column-rule : déjà utilisé en multi-column pour tracer des séparateurs verticaux (ex. : column-rule: 1px solid black;)
• Cette propriété peut désormais aussi être utilisée avec flexbox et grid

  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  

• row-rule : permet de tracer des séparateurs entre les lignes (horizontalement)

  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  

• Répétition/combinaison de plusieurs styles : repeat() ou une liste séparée par des virgules permettent de mélanger plusieurs styles

  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  

• Propriétés de contrôle fin : row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order, etc., permettent d’ajuster précisément la position, les intersections et l’ordre de superposition

Exemple : application concrète de gap decorations

• La page d’exemple définit body en grid et sépare header / nav / main / footer avec des gaps
• row-rule permet d’appliquer des séparateurs d’épaisseurs, de couleurs et de styles différents
• Le menu nav utilise flexbox et column-rule pour tracer des lignes entre les éléments
• La zone main utilise flexbox pour disposer images et texte en style masonry, avec row-rule et column-rule pour accentuer la structure en grille
• column-rule-outset: 0; et d’autres réglages permettent d’ajuster finement les positions de début et de fin des lignes

Prise en charge navigateur et activation

• Pour l’instant, il faut activer un flag (about://flags → Experimental Web Platform Features) dans les navigateurs basés sur Chromium comme Chrome/Edge 139+
• La standardisation officielle est en cours, et les retours ainsi que les expérimentations sont encouragés

Pour aller plus loin et Playground

• Brouillon de spécification CSS Gap Decorations Module Level 1
• Explainer de Microsoft Edge
• Le Playground interactif permet de tester visuellement différentes combinaisons de décorations
• Les problèmes liés à la fonctionnalité, à la compatibilité et aux retours peuvent être signalés via le Chromium issue tracker