Une nouvelle façon de dessiner des séparateurs en CSS : `CSS Gap Decorations`

• Ajouter des séparateurs entre les sections d’une page web est une technique de design courante pour structurer clairement le contenu et améliorer la lisibilité
• Il est possible d’ajouter des séparateurs avec des techniques CSS existantes comme border, mais elles présentent des limites, comme les changements de taille ou la nécessité d’ajouter du code supplémentaire
• CSS Gap Decorations résout ces problèmes en ajoutant des propriétés comme column-rule et row-rule

Techniques de séparateurs CSS existantes et leurs limites

• La propriété border est une méthode courante pour ajouter des séparateurs, mais elle peut poser les problèmes suivants
  • l’ajout de border peut modifier la taille des éléments
  • il faut écrire du code supplémentaire pour le premier et le dernier élément
  • dans une mise en page Flexbox avec retour à la ligne, le séparateur peut ne pas couvrir toute la zone
• Il est aussi possible d’ajouter des séparateurs avec les pseudo-éléments ::before et ::after, mais avec les limites suivantes
  • du code supplémentaire est nécessaire pour le premier et le dernier élément
  • cela demande un code de positionnement absolu complexe
• On peut simuler des séparateurs en appliquant une couleur de fond au conteneur de grille et une couleur de fond aux éléments
  • impossible d’ajuster la longueur des séparateurs
  • si des cellules sont vides, la couleur de fond apparaît
  • si les éléments ne remplissent pas entièrement les cellules, la couleur de fond apparaît
  • cela ne fonctionne pas si l’arrière-plan de la page n’est pas uni
• Dans une mise en page multi-colonnes, il est possible d’ajouter des séparateurs avec la propriété column-rule, mais avec les restrictions suivantes
  • cela fonctionne uniquement avec les mises en page multi-colonnes
  • impossible de contrôler la direction inline du contenu

Proposition CSS Gap Decorations

• CSS Gap Decorations est une nouvelle proposition conçue pour résoudre les problèmes ci-dessus
• Principaux points de la proposition
  • extension de la propriété column-rule pour qu’elle puisse aussi s’appliquer aux mises en page Grid et Flexbox
  • introduction d’une nouvelle propriété row-rule
  • possibilité de définir des séparateurs différents pour chaque partie du conteneur
• La propriété row-rule-color permet de modifier la couleur des séparateurs

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• Il est possible de définir des séparateurs avec des épaisseurs et des couleurs différentes

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• Il est possible de contrôler le comportement des séparateurs aux intersections
  • utilisation possible des propriétés *-rule-break et *-rule-outset
  • contrôle de la position de début et de fin des séparateurs aux intersections
  • ajustement fin de la longueur et du décalage des séparateurs

Demande de retours sur la proposition

• La proposition CSS Gap Decorations sera améliorée à partir des retours des développeurs
• Plus d’informations sont disponibles dans l’explainer officiel
• Les retours peuvent être soumis via des issues GitHub
• Les retours sur le comportement des séparateurs aux intersections sont particulièrement bienvenus

[GN⁺]

Commentaires sur Hacker News

• J’aimerais un nouveau pseudo-élément : .container:gap { background-color: red; }

  • Cela permettrait de créer des arrière-plans plus élégants, comme des pointillés ou des dégradés
  • On pourrait définir un espace à l’extrémité du séparateur avec { padding: 2px }
  • On pourrait régler séparément les espacements verticaux et horizontaux avec :gap-horz et :gap-vert
  • On pourrait obtenir des couleurs alternées avec .container:gap:nth-gap(2n) { color: blue; }

• Le design par comité n’est pas l’idéal, mais en tant que non-natif, les noms de propriétés proposés ne me semblent pas très explicites

  • Par exemple, on définit un espacement, mais ce qui est réellement dessiné, c’est un séparateur

• J’aimerais qu’ils prennent en compte le cas d’usage des panneaux redimensionnables

  • Même si l’implémentation reste entièrement côté utilisateur, il serait utile que des séparateurs stylables puissent recevoir des événements

• Ajouter une bordure modifie la taille des éléments, ce qui peut être indésirable

  • Ce problème est résolu depuis plus de 10 ans
  • Je pense que la première ligne du fichier CSS de tout le monde est * { box-sizing: border-box; }
  • Il serait plus logique de pouvoir considérer la bordure comme située à l’intérieur de la largeur

• Intéressant. Ces temps-ci, je fais surtout de l’UI en QML, et ça couvre presque tous les problèmes

  • Il y a quelques mois, j’ai implémenté des lignes de grille dans une vue calendrier en utilisant l’espacement entre les éléments pour laisser apparaître l’arrière-plan
  • J’ai laissé la propriété spacing du layout et le GPU faire le travail

• L’idée est bonne, mais elle aurait sans doute été plus utile il y a une dizaine d’années

  • Avec le CSS moderne, on peut gérer les séparateurs avec un seul sélecteur et une seule propriété
  • On peut faire quelque chose comme .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
  • L’article en parle, mais semble surestimer la fréquence des cas limites

• C’est un problème pénible depuis longtemps. C’est bien de voir quelqu’un s’y attaquer

  • Cela ne concerne que display: grid, et pas les éléments à largeur non fixe
  • Sur les petits écrans, le | entre les liens peut se retrouver à la fin de la première ligne ou au début de la seconde

• Ça me rappelle un dicton de designer allemand : « Quand un designer n’a plus d’idées, il ajoute quelques lignes »

  • On commence à ajouter des lignes quand on ne trouve plus de moyen clair de distinguer le contenu

• Je rencontre souvent ce problème, et j’aimerais une meilleure solution que <hr/>

  • Ça ne fonctionne pas pour les lignes de tableau ni pour les mises en page multicolonnes

• J’espère que ça passera... Utiliser l’IA pour combler mes lacunes sur flexbox a été une bénédiction, mais ça, on dirait une vraie solution