Während Sie nicht hingeschaut haben, wurden CSS-Verläufe besser

Eines, das mir auf der Liste der Features für Lea Verous conic-gradient() Polyfill ins Auge fiel, war der letzte Punkt

Unterstützt die doppelte Positions-Syntax (zwei Positionen für denselben Farbstop als Abkürzung für zwei aufeinanderfolgende Farbstops mit derselben Farbe)

Überraschenderweise habe ich kürzlich entdeckt, dass die meisten Leute nicht einmal wissen, dass eine doppelte Position für Gradientstops etwas ist, das tatsächlich in der Spezifikation existiert, also beschloss ich, darüber zu schreiben.

Laut der Spezifikation

Die Angabe von zwei Orten erleichtert die Erstellung von "Streifen" mit Volltonfarbe in einem Verlauf, ohne dass die Farbe zweimal wiederholt werden muss.

Ich stimme vollkommen zu, das war das Erste, woran ich dachte, als ich von diesem Feature erfuhr.

Nehmen wir an, wir möchten folgendes Ergebnis erzielen: einen Verlauf mit einer Reihe von vertikalen Streifen gleicher Breite (die ich aus einem früheren Beitrag von Chris übernommen habe)

Die Hex-Werte sind: #5461c8, #c724b1, #e4002b, #ff6900, #f6be00, #97d700, #00ab84 und #00a3e0.

Schauen wir uns zuerst an, wie wir das mit CSS machen würden, ohne doppelte Stopp-Positionen zu verwenden!

Wir haben acht Streifen, was jeden von ihnen einem Achtel der Gradientbreite entspricht. Ein Achtel von 100% ist 12,5%, also gehen wir von einem zum nächsten bei Vielfachen dieses Wertes.

Das bedeutet, dass unser linear-gradient() wie folgt aussieht

linear-gradient(90deg, 
             #5461c8 12.5% /* 1*12.5% */, 
  #c724b1 0, #c724b1 25%   /* 2*12.5% */, 
  #e4002b 0, #e4002b 37.5% /* 3*12.5% */, 
  #ff6900 0, #ff6900 50%   /* 4*12.5% */, 
  #f6be00 0, #f6be00 62.5% /* 5*12.5% */, 
  #97d700 0, #97d700 75%   /* 6*12.5% */, 
  #00ab84 0, #00ab84 87.5% /* 7*12.5% */, 
  #00a3e0 0)

Beachten Sie, dass wir die Prozentwerte der Stopp-Positionen nicht wiederholen müssen, denn wenn eine Stopp-Position kleiner ist als eine vorherige, haben wir automatisch einen scharfen Übergang. Deshalb ist es immer sicher, 0 zu verwenden (was immer kleiner ist als jeder positive Wert) und #c724b1 25%, #e4002b 0 anstelle von z.B. #c724b1 25%, #e4002b 25% zu haben. Das kann uns das Leben in Zukunft erleichtern, wenn wir zum Beispiel beschließen, zwei weitere Streifen hinzuzufügen und die Stopp-Positionen zu Vielfachen von 10% machen.

Nicht schlecht, besonders im Vergleich zu dem, was Gradientengeneratoren normalerweise ausspucken. Aber wenn wir beschließen, dass einer dieser Streifen in der Mitte nicht ganz zu den anderen passt, bedeutet eine Änderung in zwei Positionen eine Aktualisierung an zwei Stellen.

Wiederum nicht schlecht und nichts, was wir nicht mit ein wenig Hilfe von einem Präprozessor umgehen könnten

$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0;

@function get-stops($c-list) {
  $s-list: ();
  $n: length($c-list);
  $u: 100%/$n;
	
  @for $i from 1 to $n {
    $s-list: $s-list, 
             nth($c-list, $i) $i*$u, 
             nth($c-list, $i + 1) 0
  }

  @return $s-list
}

.strip {
  background: linear-gradient(90deg, get-stops($c)))
}

Dies erzeugt den exakten CSS-Verlauf, den wir etwas früher gesehen haben, und jetzt müssen wir nichts mehr an zwei Stellen ändern.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Selbst wenn ein Präprozessor uns davor bewahren kann, dasselbe zweimal zu tippen, eliminiert er die Wiederholung im generierten Code nicht.

Und wir wollen vielleicht nicht immer einen Präprozessor verwenden. Abgesehen von der Tatsache, dass manche Leute stur sind oder eine irrationale Angst oder Hass gegenüber Präprozessoren haben, erscheint es manchmal ein wenig albern, eine Schleife zu verwenden.

Zum Beispiel, wenn wir kaum etwas zum Schleifen haben! Nehmen wir an, wir möchten ein viel einfacheres background-Muster erzielen, wie z. B. ein diagonales Hashtags-Muster, das meiner Meinung nach ein weitaus häufigerer Anwendungsfall ist als ein überzogenes Regenbogenmuster, das wahrscheinlich sowieso nicht gut auf den meisten Websites passt.

Dies erfordert die Verwendung von repeating-linear-gradient() und das bedeutet einiges an Wiederholung, auch wenn wir nicht mehr die gleiche lange Liste von Hex-Werten haben wie zuvor

repeating-linear-gradient(-45deg, 
    #ccc /* can't skip this, repeating gradient won't work */, 
    #ccc 2px, 
    transparent 0, 
    transparent 9px /* can't skip this either, tells where gradient repetition starts */)

Hier können wir die erste und letzte Stopps nicht weglassen, denn genau diese geben an, wie der Verlauf innerhalb des durch die background-size definierten Rechtecks wiederholt wird.

Wenn Sie verstehen möchten, warum es besser ist, repeating-linear-gradient() anstelle eines herkömmlichen linear-gradient() in Kombination mit der richtigen background-size zu verwenden, um solche Hashtags zu erstellen, lesen Sie diesen anderen Artikel, den ich vor einiger Zeit geschrieben habe.

Genau hier kommt ein solches Feature ins Spiel – es ermöglicht uns, Wiederholungen im endgültigen CSS-Code zu vermeiden.

Für das Regenbogenstreifen-Szenario wird unser CSS zu

linear-gradient(90deg, 
    #5461c8 12.5%, 
    #c724b1 0 25%, 
    #e4002b 0 37.5%, 
    #ff6900 0 50%, 
    #f6be00 0 62.5%, 
    #97d700 0 75%, 
    #00ab84 0 87.5%, 
    #00a3e0 0)

Und um die Hashtags zu reproduzieren, brauchen wir nur

repeating-linear-gradient(-45deg, 
    #ccc 0 2px, 
    transparent 0 9px)

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Wie sieht es mit der Unterstützung aus? Nun, gut, dass Sie fragen! Sie ist tatsächlich ziemlich gut! Sie funktioniert in Safari, Chromium-Browsern (zu denen jetzt auch Edge gehört!) und Firefox. Pre-Chromium Edge und vielleicht einige mobile Browser könnten Sie noch zurückhalten, aber wenn Sie sich nicht darum kümmern müssen, jeden Browser zu unterstützen, oder es in Ordnung ist, ein Fallback bereitzustellen, legen Sie los und nutzen Sie das!