Une nouvelle façon de styliser les espaces dans CSS

Sam Davis Omekara

Patrick Brosset

Publié le 11 juin 2025

Dites adieu aux hacks de bordure et de pseudo-élément, et dites bonjour aux décorations de marge CSS.

L'équipe Microsoft Edge est ravie d'annoncer que les décorations d'espace CSS, une nouvelle façon de styliser les espaces entre les éléments dans les mises en page flex, grille et multicolonne, sont désormais disponibles en version d'essai pour les développeurs dans Chrome et Edge 139.

Essayez-la et faites-nous part de vos commentaires pour contribuer à façonner l'avenir de cette API.

Liens utiles

• Spécification
• Article de blog annonçant Microsoft Edge
• Explication

Problème

Les écarts de style dans les composants d'interface utilisateur tels que les calendriers, les cartes ou les grilles de données peuvent considérablement améliorer la lisibilité et contribuer à l'esthétique globale. Cependant, pour obtenir cet effet dans les mises en page en grille et en flexbox, il fallait traditionnellement recourir à des solutions peu pratiques avec des bordures, des pseudo-éléments ou des astuces d'arrière-plan. Ces solutions de contournement peuvent poser problème pour un certain nombre de raisons.

• Non intuitif:ils introduisent des dépendances structurelles pour le style visuel, ce qui va à l'encontre des principes du HTML sémantique.
• Non accessibles:elles nécessitent souvent des éléments DOM supplémentaires, qui peuvent interférer avec les technologies d'assistance, comme les lecteurs d'écran.
• Difficiles à gérer:ils nécessitent une logique de mise en page complexe et rendent la cohérence du style entre les composants plus difficile.
• Nuisible aux performances:ces solutions de contournement peuvent ajouter des éléments inutiles au DOM, ce qui peut entraîner des problèmes de performances.

Bien que la plate-forme Web prenne déjà en charge les écarts de style avec la propriété column-rule, elle est actuellement limitée aux mises en page multicolonnes uniquement. Les développeurs Web demandent depuis longtemps un moyen cohérent de styliser les espaces dans d'autres types de mise en page pertinents, comme la grille et la flexbox.

La solution: décorations de l'espace CSS

Les décorations d'espace étendent la propriété column-rule pour qu'elle fonctionne avec d'autres types de mise en page tels que la grille et la flexbox, et introduisent une nouvelle propriété row-rule pour la compléter. Cela permet d'assurer la cohérence et la personnalisation de la mise en forme des espaces entre les éléments dans différents types de mise en page.

Les décorations d'espace CSS présentent les avantages suivants:

• Aucun impact sur la mise en page:les décorations sont purement visuelles. Ils n'affectent pas la mise en page ni l'espacement. Vous pouvez donc les adopter sans craindre de casser les conceptions existantes.
• Syntaxe de répétition:comme avec CSS Grid, vous pouvez utiliser la syntaxe repeat() pour créer des motifs de décoration dans différentes parties d'un conteneur, ce qui permet de créer des conceptions riches et cohérentes avec un minimum de CSS.
• Marquage plus clair:vous n'avez pas besoin d'éléments ni de pseudo-éléments supplémentaires. Il vous suffit de styliser directement les espaces.
• Personnalisation:les nouvelles propriétés CSS telles que *rule-break, *rule-outset et gap-rule-paint-order offrent plus d'options de personnalisation que le style de règle traditionnel de largeur, de style et de couleur.

Avec les décorations d'espace CSS, il n'a jamais été aussi simple de créer des mises en page de page distinctes et faciles à gérer.

Decorations de l'espace en action

Pour jouer avec les décorations d'espace CSS dès aujourd'hui, utilisez un navigateur compatible: Edge ou Chrome, à partir de la version 139, et activez l'option Enable Experimental Web Platform Features (Activer les fonctionnalités expérimentales de la plate-forme Web) en accédant à edge://flags ou chrome://flags.

Laboratoire interactif pour les développeurs

Pour tester les différents types de mises en page compatibles avec les décorations de marges CSS et toutes les nouvelles propriétés, essayez notre espace de jeu interactif pour les développeurs.

Menu hamburger

La démonstration du menu hamburger montre comment utiliser la propriété column-rule-break: intersection pour interrompre les décorations des espaces entre les colonnes à chaque intersection visible avec des espaces entre les lignes.

La démonstration utilise également column-rule-offset: -15px pour ajuster la longueur des décorations, en les éloignant des bords de chaque intersection.

Notebook

Dans la démo du notebook, row-rule-break: none garantit que les décorations de ligne ne sont pas interrompues aux intersections. Elles s'exécutent en continu de gauche à droite du conteneur. D'autre part, column-rule-break: spanning-item garantit que les décorations de colonnes ne sont pas peintes derrière les éléments s'étendant sur plusieurs lignes. Elles commencent et s'arrêtent aux éléments s'étendant sur plusieurs lignes, formant une intersection en T visible.

La propriété row-rule utilise la fonction repeat() pour contrôler précisément la façon dont les décorations d'espace sont appliquées dans différentes sections de la mise en page. Cela permet d'appliquer un style dans lequel les règles de ligne sont masquées dans l'en-tête et le pied de page, plus épaisses autour du contenu principal et plus subtiles ailleurs.

Actualités quotidiennes sur le CSS

La démo Daily CSS News utilise une mise en page de style magazine et définit des décorations d'espace CSS sur plusieurs conteneurs de grille et de flexbox.

Notez le jeu de Sudoku à droite, qui utilise une grille de 9 x 9 et le motif de répétition pour dessiner les lignes fines et épaisses entre les lignes et les colonnes:

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Demander des commentaires

Nous sommes impatients que vous essayiez les décorations d'espace CSS. Nous pensons qu'elle résout un problème courant. Nous aimerions connaître votre avis à ce sujet afin d'affiner cette fonctionnalité en fonction de vos besoins.

La fonctionnalité de décoration des espaces CSS est toujours en cours d'implémentation dans Chromium. Si vous le faites, sachez que nous y travaillons toujours activement et que vous pouvez rencontrer des cas où il ne se comporte pas comme prévu. Certaines des limites actuelles concernent l'animation des décorations de l'espace et l'utilisation d'un très grand nombre de canaux de grille.

Si vous trouvez un bug ou si vous avez des commentaires à propos de cette fonctionnalité, partagez-les en ouvrant un nouveau bug Chromium.