CSS —repeat()-Funktion: Dynamische Wiederholungen jetzt selbst umsetzen

Die Idee einer generischen --repeat()-Funktion in CSS ist nicht neu, doch erst jetzt wird sie greifbar. Entwickler:innen experimentieren mit einer benutzerdefinierten Lösung, die beliebige CSS-Werte dynamisch wiederholt – ähnlich der bestehenden repeat()-Funktion für Rasterlayouts, aber universell einsetzbar. Diese Innovation könnte die Art und Weise, wie wir CSS schreiben, grundlegend verändern.

Warum eine generische Repeat-Funktion in CSS fehlt

Die aktuelle repeat()-Funktion in CSS beschränkt sich auf die Definition von Rasterspalten und -zeilen. Doch Entwickler:innen wünschen sich seit Langem eine flexiblere Alternative, die in allen CSS-Kontexten funktioniert – etwa für die Wiederholung von Farben, Schatten oder sogar komplexen Shape-Definitionen. Inspiriert von Diskussionen in der Webentwickler-Community, insbesondere auf Plattformen wie BlueSky, wurde diese Idee nun in einem offiziellen Vorschlag beim W3C CSS Working Group eingereicht.

Ein Entwickler, der anonym bleiben möchte, hat kürzlich eine benutzerdefinierte Implementierung erstellt, die genau diese Lücke schließt. Mit dieser Funktion lässt sich ein beliebiger CSS-Wert beliebig oft wiederholen – direkt im Browser, ohne auf zukünftige Standardisierungen zu warten.

Die selbstgebaute --repeat()-Funktion im Detail

Die selbst entwickelte Funktion nutzt eine Kombination aus benutzerdefinierten Eigenschaften (Custom Properties) und der calc()-Funktion, um binäre Logik in CSS abzubilden. Hier die vollständige Implementierung:

@function --repeat(--n, --x) {
  --bit7: calc(round(down, var(--n) / 128));
  --val6: calc(var(--n) - var(--bit7) * 128);
  --bit6: calc(round(down, var(--val6) / 64));
  --val5: calc(var(--val6) - var(--bit6) * 64);
  --bit5: calc(round(down, var(--val5) / 32));
  --val4: calc(var(--val5) - var(--bit5) * 32);
  --bit4: calc(round(down, var(--val4) / 16));
  --val3: calc(var(--val4) - var(--bit4) * 16);
  --bit3: calc(round(down, var(--val3) / 8));
  --val2: calc(var(--val3) - var(--bit3) * 8);
  --bit2: calc(round(down, var(--val2) / 4));
  --val1: calc(var(--val2) - var(--bit2) * 4);
  --bit1: calc(round(down, var(--val1) / 2));
  --bit0: calc(var(--val1) - var(--bit1) * 2);

  --pow0: var(--x);
  --pow1: var(--pow0) var(--pow0);
  --pow2: var(--pow1) var(--pow1);
  --pow3: var(--pow2) var(--pow2);
  --pow4: var(--pow3) var(--pow3);
  --pow5: var(--pow4) var(--pow4);
  --pow6: var(--pow5) var(--pow5);
  --pow7: var(--pow6) var(--pow6);

  result: 
    if(style(--bit0 = 1): var(--pow0); else: ;)
    if(style(--bit1 = 1): var(--pow1); else: ;)
    if(style(--bit2 = 1): var(--pow2); else: ;)
    if(style(--bit3 = 1): var(--pow3); else: ;)
    if(style(--bit4 = 1): var(--pow4); else: ;)
    if(style(--bit5 = 1): var(--pow5); else: ;)
    if(style(--bit6 = 1): var(--pow6); else: ;)
    if(style(--bit7 = 1): var(--pow7); else: ;);
}

Diese Funktion wandelt die Eingabe --n in ein binäres Format um und wiederholt den zweiten Parameter --x entsprechend. Das Prinzip basiert auf der Umwandlung einer Dezimalzahl in eine binäre Darstellung, bei der jedes Bit entscheidet, ob ein bestimmtes Potenz von Zwei in die finale Zeichenkette aufgenommen wird.

So funktioniert die Umwandlung von Dezimal zu Binär

Die Kernidee stammt aus einer früheren Innovation der CSS-Entwicklerin Ana Tudor, die zeigte, wie Modulo-Operationen in CSS simuliert werden können. Die hier verwendete Methode nutzt eine sequenzielle Division durch Potenzen von Zwei, um die einzelnen Bits einer Zahl zu extrahieren.

Ein Beispiel: Die Zahl 23 (binär 10111) wird wie folgt zerlegt:

• 23 / 16 = 1.4375 → 1 (höchstes Bit)
• 23 - 16 = 7
• 7 / 8 = 0.875 → 0
• 7 / 4 = 1.75 → 1
• 7 - 4 = 3
• 3 / 2 = 1.5 → 1
• 3 - 2 = 1
• 1 / 1 = 1 → 1

Jedes Bit bestimmt, ob der entsprechende Wert (z. B. --pow4 für das 16er-Bit) in die finale Zeichenkette aufgenommen wird. Bei --repeat(23, A) würde das Ergebnis AAAAAAAAAAAAAAAAAAAAAAA (23 Mal A) lauten.

Praktische Anwendungsbeispiele

Die --repeat()-Funktion lässt sich in verschiedenen CSS-Kontexten nutzen. Hier einige konkrete Anwendungsfälle:

• Wiederholte Hintergrundmuster: Erstellen Sie dynamische Hintergrundverläufe ohne manuelles Kopieren von Codezeilen.

  .element {
    background: linear-gradient(90deg, --repeat(5, #ff0000 10%)); 
  }

• Generierung von Icons oder Symbolen: Wiederholen Sie SVG-Pfade oder Unicode-Symbole.

  .icon-list {
    content: --repeat(3, "✓ ");
  }

• Dynamische Schatten oder Filter: Erzeugen Sie komplexe Effekte durch Wiederholung.

  .card {
    box-shadow: --repeat(4, 0 2px 4px rgba(0,0,0,0.1));
  }

Die Funktion unterstützt bis zu 255 Wiederholungen (8-Bit-System) und kann bei Bedarf durch Anpassung der Bit-Tiefe erweitert werden.

Grenzen und Zukunftsperspektiven

Aktuell ist die Implementierung auf die Unterstützung moderner Browser beschränkt, da sie auf benutzerdefinierte Eigenschaften und erweiterte calc()-Funktionen angewiesen ist. Zudem erfordert die Nutzung etwas Einarbeitungszeit, da die binäre Logik nicht intuitiv ist.

Trotzdem markiert diese Entwicklung einen wichtigen Schritt hin zu mehr Flexibilität in CSS. Sollte sie Eingang in die offiziellen CSS-Spezifikationen finden, könnte sie die Art und Weise, wie wir CSS schreiben, revolutionieren – ähnlich wie einst die Einführung von CSS-Grids.

Für Entwickler:innen, die nicht auf zukünftige Standards warten möchten, bietet die selbstgebaute --repeat()-Funktion bereits heute eine praktikable Lösung. Mit etwas Experimentierfreude lassen sich damit kreative und effiziente CSS-Lösungen umsetzen, die bisher undenkbar waren.