Achtung vor veralteter Syntax bei CSS3-Farbverläufen

Achtung - veraltete Syntax für Farbverläufe

Webseiten entwickeln besteht meist zu einem nicht unerheblichen Teil daraus, Code-Schnipsel von irgendwelchen Quellen zu kopieren. Bei Farbverläufen sollte man allerdings aufpassen: An vielen Stellen findet sich im Web noch die veraltete Standardsyntax. Unterschiede zeigen sich bei der Art, wie die Richtung des Farbverlaufs angegeben wird.

Das häufig bei Webseiten die veraltete Syntax verwendet wird, hat im August 2015 sogar dazu geführt, dass Firefox wieder die Unterstützung für die veraltete Syntax mit dem -moz-Präfix ergänzt hat.

Die Standardsyntax ist die Wertangabe ohne Präfix, die üblicherweise zuletzt steht, wie etwa die linear-gradient()-Angabe im folgenden Beispiel:

background: -webkit-linear-gradient(white, blue);
background: linear-gradient(white, blue);

Bei der Farbverlaufsyntax hat es noch einmal eine Änderung gegeben, wie die Richtung des Farbverlaufs angegeben wird.

Nehmen wir einen Farbverlauf, der von links nach rechts geht, dann unterscheidet sich die ältere und die neuere Standardsyntax:

/* Ältere Syntaxvariante */
background-image: linear-gradient(left, #ADDDD2, #040707);

/* Neue Syntaxvariante */
background-image: linear-gradient(to right, #ADDDD2, #040707);

Die neue Syntaxvariante erkennt man am Schlüsselwort to: Es wird der Endpunkt der Richtung bestimmt to right, bei der älteren Syntax hingegen hat man den Anfang des Farbverlaufs angegeben, also im Beispiel left geschrieben.

Im Normalfall benötigt man die ältere Syntaxvariante mit dem –webkit-Präfix für ältere Webkitbrowser und die neue Variante ohne Präfix für Internet Explorer 10, Chrome, Firefox und Safari ab 6.1. Das sieht dann folgendermaßen aus:

background-image: -webkit-linear-gradient(left, #ADDDD2, #040707);
background-image: linear-gradient(to right, #ADDDD2, #040707);

Wichtig: Wenn bei der Standardangabe eine Richtungsangabe ohne das Schlüsselwort to steht, ist klar, dass es sich um die ältere Syntax handelt, dann muss man den Wert aktualisieren.

Wer es sich einfach machen will, verwendet einfach Autoprefixer, beispielsweise in der Online-Variante: Hier muss man nur die Standardsyntax angeben und die andere Angabe wird erzeugt.

Richtung durch Grad angeben

Neben den Schlüsselwörtern kann man die Richtung auch in Grad angeben, ein paar Beispiel dazu:

  • 0deg entspricht to top
  • 90deg entspricht to right
  • 180deg entspricht to bottom

Interessant sind aber natürlich die Zwischenstufen, die dadurch möglich werden.

Bei der Interpretation des Winkels gibt es ebenfalls einen Unterschied zur ursprünglichen Syntax. Glücklicherweise steht hier eine einfache Formel zur Umrechnung zur Verfügung:

Ältere Syntax in neue Syntax umrechnen

90deg – neuerWert = ältererWert

Damit ergeben folgende Angaben einen schrägen Farbverlauf:

background-image: -webkit-linear-gradient(-45deg, #ADDDD2, #040707);
background-image: linear-gradient(135deg, #ADDDD2, #040707);

Dabei wurde die Formel angewandt: 90deg – 135deg (Standardangabe) = -45deg

135deg schreibt man bei der linear-gradient()-Angabe, -45 hingegen bei der Angabe mit  -webkit- für ältere Webkit-Browser.

Prinzipiell gilt: Wenn ein Farbverlauf mit Grad identische Werte bei der Standardangabe und -webkit-Angabe hat, handelt es sich um die veraltete Syntax!

An zwei Dingen kann man also die veraltete Syntax erkennen:

  • bei Schlüsselwörtern: left, right, bottom etc. ohne to.
  • bei Gradangabe: Wenn der Wert der -webkit-Angabe mit dem für die präfixlose übereinstimmt, handelt es sich ebenfalls um die veraltete Syntax.

Gut aber auch: Die sicher am häufigsten benutzten Farbverläufe gehen von oben nach unten. In diesen Fällen ist keine Richtungsangabe notwendig und damit gibt es auch keinen Unterschied zwischen der älteren und der neueren Syntax.

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>