Neue Methode zum Zeichnen von Trennlinien in CSS: `CSS Gap Decorations`

• Das Hinzufügen von Trennlinien zwischen Abschnitten auf einer Webseite ist eine gängige Designtechnik, um Inhalte klar zu strukturieren und die Lesbarkeit zu verbessern
• Mit bestehenden CSS-Techniken wie border lassen sich Trennlinien hinzufügen, allerdings gibt es Einschränkungen wie Größenänderungen und zusätzlichen Code
• CSS Gap Decorations löst diese Probleme, indem Eigenschaften wie column-rule und row-rule ergänzt werden

Bisherige CSS-Techniken für Trennlinien und ihre Grenzen

• Die Eigenschaft border ist eine übliche Methode zum Hinzufügen von Trennlinien, kann aber folgende Probleme verursachen
  • Durch das Hinzufügen von border kann sich die Elementgröße ändern
  • Für das erste und letzte Element muss zusätzlicher Code geschrieben werden
  • Wenn in einem Flexbox-Layout Zeilenumbrüche auftreten, decken die Trennlinien möglicherweise nicht den gesamten Bereich ab
• Mit den Pseudoelementen ::before und ::after lassen sich ebenfalls Trennlinien hinzufügen, allerdings mit folgenden Einschränkungen
  • Zusätzlicher Code für das erste und letzte Element erforderlich
  • Komplexer Code mit absoluter Positionierung notwendig
• Trennlinien lassen sich auch nachbilden, indem auf den Grid-Container eine Hintergrundfarbe und auf die Elemente ebenfalls eine Hintergrundfarbe angewendet wird
  • Die Länge der Trennlinien lässt sich nicht anpassen
  • Bei leeren Zellen ist die Hintergrundfarbe sichtbar
  • Wenn Elemente die Zellen nicht vollständig ausfüllen, ist die Hintergrundfarbe sichtbar
  • Funktioniert nicht, wenn der Seitenhintergrund nicht einfarbig ist
• In Multi-Column-Layouts lassen sich Trennlinien mit der Eigenschaft column-rule hinzufügen, allerdings mit folgenden Einschränkungen
  • Funktioniert nur in Multi-Column-Layouts
  • Keine Steuerung der Inline-Richtung des Inhalts möglich

Vorschlag für CSS Gap Decorations

• CSS Gap Decorations ist ein neuer Vorschlag, um die oben genannten Probleme zu lösen
• Zentrale Punkte des Vorschlags
  • Erweiterung der Eigenschaft column-rule, sodass sie auch auf Grid- und Flexbox-Layouts angewendet werden kann
  • Einführung der neuen Eigenschaft row-rule
  • Unterschiedliche Trennlinieneinstellungen für einzelne Container-Bereiche möglich
• Mit der Eigenschaft row-rule-color lässt sich die Farbe der Trennlinien ändern

  .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;  
  }  
  

• Es lassen sich Trennlinien mit unterschiedlicher Stärke und Farbe festlegen

  .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;  
  }  
  

• Das Verhalten der Trennlinien an Kreuzungspunkten lässt sich steuern
  • Eigenschaften wie *-rule-break und *-rule-outset können verwendet werden
  • Start- und Endpositionen der Trennlinien an Kreuzungspunkten lassen sich festlegen
  • Feine Anpassung von Trennlinienlänge und Offset möglich

Bitte um Feedback zum Vorschlag

• Der Vorschlag für CSS Gap Decorations soll auf Basis von Entwickler-Feedback weiter verbessert werden
• Weitere Informationen gibt es im offiziellen Explainer
• Feedback kann über GitHub-Issues eingereicht werden
• Besonders willkommen ist Feedback zum Verhalten der Trennlinien an Kreuzungspunkten

[GN⁺]

Hacker-News-Kommentar

• Ich hätte gern ein neues Pseudoelement: .container:gap { background-color: red; }

  • Damit ließen sich schickere Hintergründe wie gestrichelte Linien oder Farbverläufe erzeugen
  • Mit { padding: 2px } könnte man am Ende des Trennelements Abstand festlegen
  • Mit :gap-horz und :gap-vert ließen sich vertikale und horizontale Abstände getrennt festlegen
  • Mit .container:gap:nth-gap(2n) { color: blue; } könnte man abwechselnde Farben bekommen

• Design by Committee ist nicht ideal, aber als Nicht-Muttersprachler vermittelt der vorgeschlagene Eigenschaftenname die Bedeutung nicht besonders gut

  • Er definiert zum Beispiel einen Abstand, zeichnet aber eigentlich ein Trennelement

• Ich hoffe, man hat auch den Anwendungsfall anpassbarer Panels berücksichtigt

  • Selbst wenn die Implementierung komplett im Userland bleibt, wäre es nützlich, wenn stylbare Trennelemente Events empfangen könnten

• Fügt man einen Rahmen hinzu, ändert sich die Größe des Elements, was unerwünscht sein kann

  • Dieses Problem ist seit mehr als 10 Jahren gelöst
  • Ich vermute, die erste Zeile in jeder CSS-Datei lautet * { box-sizing: border-box; }
  • Es wäre sinnvoller, wenn sich Rahmen innerhalb der Breite befänden

• Interessant. Ich arbeite in letzter Zeit vor allem mit QML an UIs, und dort wird fast jedes Problem abgedeckt

  • Vor ein paar Monaten habe ich in einer Kalenderansicht Rasterlinien umgesetzt, indem ich die Abstände zwischen Elementen genutzt habe, damit der Hintergrund sichtbar wird
  • Mit der Layout-Eigenschaft "spacing" und der GPU, die die Arbeit erledigt

• Gute Idee, aber vor etwa 10 Jahren wäre das nützlicher gewesen

  • Mit modernem CSS kann man Trennelemente mit einem einzelnen Selektor und einer Eigenschaft behandeln
  • Zum Beispiel so: .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
  • Der Artikel erwähnt das zwar, scheint aber die Häufigkeit von Randfällen zu überschätzen

• Das war lange ein schmerzhaftes Problem. Schön zu sehen, dass jemand etwas dagegen unternimmt

  • Das betrifft allerdings nur display: grid und nicht Elemente mit nicht festgelegter Breite
  • Auf kleinen Bildschirmen kann das | zwischen Links am Ende der ersten oder am Anfang der zweiten Zeile erscheinen

• Das erinnert mich an ein Sprichwort deutscher Designer: "Wenn dem Designer nichts mehr einfällt, fügt er ein paar Linien hinzu"

  • Man fängt an, Linien hinzuzufügen, wenn es keine Möglichkeit gibt, Inhalte klarer zu trennen

• Ich stoße oft auf dieses Problem und hätte gern eine bessere Lösung als <hr/>

  • Bei Tabellenzeilen oder mehreren Spalten funktioniert das nicht

• Hoffentlich wird das angenommen ... KI zu nutzen, um meine Wissenslücken bei Flexbox zu beheben, war ein Segen, aber das hier fühlt sich wie eine echte Lösung an