- Safari ermöglicht einen Ausblick auf die Zukunft von CSS › Webstandard-Blog

Safari ermöglicht einen Ausblick auf die Zukunft von CSS

CSS - 25 Apr, 2008

Twittern
Kommentare (5)

Farbverläufe sind eine Möglichkeit, Bereichen einer Webseite einen etwas anderen Effekt zu verleihen als die Vergabe einer bloßen Hintergrundfarbe. Oftmals werden sie von einer entweder 1px breiten oder 1px hohen Grafik repräsentiert und wiederholen sich dann innerhalb des integriertes Bereiches so oft, wie ihnen Platz zur Verfügung gestellt wird. WebKit, die Engine die hinter Safari steckt hat nun u.a. für Mac OS X und Windows neue WebKit Nightly Builds herausgebracht, die es ermöglichen via CSS Farbverläufe wie folgt zu definieren.

Wie definiert man einen Farbverlauf ausschließlich mit CSS?

Linear Gradient Code Example

Dieser Code-Auschnitt führt zu einer Darstellung, die wir bisher nur von den oben angesprochenen Hintergrundgrafiken gewohnt waren. Dieser lineare Verlauf kann mit der Eigenschaft radial aber auch für kreisförmige Elemente definiert werden. Ein Blick auf den Code zeigt, dass neben der Art der Ausrichtung (linear), die Richtung des Farbverlaufes (von links-oben, nach links-unten), ebenso wie die beiden Farben definiert werden. Der Wert 0.66 steht hierbei für die Weite des Verlaufes der zuerst definierten Farbe. Die darauf folgenden Eigenschaften -webkit-background-origin und -webkit-background-clip sorgen dafür, dass etwaige Innenabstände angezeigt werden und der Farbverlauf nicht direkt am Rahmen des Elementes angezeigt wird. Mehr zu diesen Eigenschaften gibt es unter CSS3.info.

Linear Gradient Leider ist bisher nur der Safari mit den erwähnten WebKit Nightly Builds in der Lage diese auf CSS3 basierenden Eigenschaften korrekt abzubilden. Alle anderen Browser, werden innerhalb des Rahmens keinen Farbverlauf anzeigen. Da man sich Tag ein Tag aus vor allem mit den "eingeschränkten" Fähigkeiten der Browser (Stichwort: IE) rumschlagen muss, ist es doch eine wahre Freude zu sehen, dass es auch anders gehen kann. Auch wenn der Weg für andere Browserhersteller sicherlich noch lang und beschwerlich sein wird. Wer bisher, aus welchen Gründen auch immer, noch keinen Safari-Icon auf seinem Desktop platziert hat, hat nun einen Grund dies zu tun ;o)

Falko
25 Apr 2008, 11:36

Wow da freut man sich schon auf CSS3. Aber ich schätze mal das das noch ewig dauert bis alte Browser (ich sage nur IE6) aus dem Netz verschwinden.
Webstandard-Team
25 Apr 2008, 11:45

Träumen sei doch erlaubt ;o)
Melanie - Aber Natürlich
25 Apr 2008, 12:43

@Falko, erst muss mal der IE 5 verschwinden ;-) Auch wenn es zum Glück nicht mehr viele sind.
webpixelkonsum
28 Apr 2008, 20:32

Grundsätzlich finde ich diese Entwicklung sehr gut.

Das Problem, meiner Meinung nach, besteht darin, dass es zu viele Browser gibt, die im Alltag benutzt werden und noch nicht diese Möglichkeit nutzen können. Nur auf den IE zu verweisen ist in meinen Augen zu kurz. Es ist nun mal ein Fakt, dass erst der IE 7.o und höher brauchbar ist. Jedes mal auf diese Mißstände hinzuweisen, hilft auch nicht weiter. Den es handelt sich bei Safari auch nur um eine Beta-Version.

Wenn Opera & Firefox so schnell wie möglich nachziehen, wäre es sehr gut für mehr Wettbewerb unter den Browsern. Hier sind aber die Webdesigner und Webentwickler gefragt ;)

Ralph
Webstandard-Team
29 Apr 2008, 08:11

@Ralph: "...Da man sich Tag ein Tag aus vor allem mit den "eingeschränkten" Fähigkeiten der Browser (Stichwort: IE) rumschlagen muss, ..." Es gilt also nicht nur für den IE und hier noch nicht einmal auf die 7er , sondern eher auf die 6er Version und niedriger. Außerdem soll dieser kleinen Artikel nur einen AUSBLICK darstellen auf das was uns erwarten kann, dass die weitere Entwicklung natürlich davon abhängig ist was die Browserhersteller in naher Zukunft tun werden, ist vollkommen klar. Bisher sind die Eigenschaften die bei Safari Beta waren, letztendlich auch in der finalen Version vorhanden gewesen. Daher ist die Wahrscheinlichkeit nicht gerade gering, dass es auch diesmal der Fall sein wird. Ob Firefox und Opera in Bezug auf CSS3 so schnell nachziehen, bezweifle ich. Leider.