Kategorie: CSS

Letzte Woche änderte das Webkit-Team die Syntax für CSS3 linear-gradient und radial-gradient und orientiert sich jetzt an der vom W3C favourisierten Syntax von Mozilla. Die Integration ist bereits in die Nightly Builds eingeflossen und wird sicherlich demnächst auch in die Webkit-basierenden Browser, wie Chrome oder Safari integriert.

Bisher hatte man recht viel Schreibarbeit, wenn man CSS3 Verläufe browserübergreifend einsetzen wollte. Im CSS3 Adventskalender Tag3 kann man die derzeitige Anweisungen cross-browser-fähig nachlesen. Zukünftig wird Webkit als Übergang auch weiterhin die bestehende Syntax unterstützen.

Man kann also die Eigenschaften für CSS3 Gradient wie folgt angeben:

.linear-top {
/* Für WebKit alt (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, ⏎
from(#c8482c), to(#fff));

/* NEU NEU NEU - WebKit (Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #c8482c, #fff);

/* Für Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #c8482c, #fff);

/* aktueller W3C working draft */
background: linear-gradient(top, #c8482c, #fff);
}

Ein richtiger Schritt und auch ein Ereignis, bei dem man sieht, dass CSS3 noch in der Entwicklung ist. Trotzdem empfehle ich heute schon CSS3 einzusetzen, wo es geht.