CSS3 im Detail: RGBa

von

Hallo und herzlich willkommen zum ersten Teil meiner CSS3 im Detail-Reihe. :)

Während dieser Reihe möchte ich euch gern die wichtigsten Neuerungen, die CSS3 mit sich bringt, vorstellen und einzeln näher betrachten. Weiterhin wird die Unterstützung in der derzeitigen Browserlandschaft aufgezeigt und welche Vor- und eventuell auch Nachteile die Techniken haben.

Im ersten Teil von CSS3 im Detail dreht sich alles um den neuen Farbraum RGBa.

Internet ExplorerEins vorweg: Der Internet Explorer in Version 6, 7 und 8 unterstützt noch keines der Features. IE9 hingegen beherrscht erste CSS3 Spezifikationen. Mehr Infos gibts auf meiner Browser Support Checklist CSS3.

Neuer Farbraum – RGBa

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal). Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

Firefox Safari Opera Chrome Internet Explorer

Syntax

RGBa ist ganz einfach:

1
2
3
p.rgba {
	color:rgba(255, 255, 255, 0.75);
}

75% Weißer Text

RGBa erlaubt es uns mit Hilfe des vierten Wertes eine Transparenz anzugeben. Ich habe hier 0.75 gewählt, d.h. der Text ist genau zu 75% sichtbar und zu 25% transparent. Es dürfen nur Werte zwischen 0 und 1 angegeben werden, wobei 0 für vollständig transparent (unsichtbar) und 1 für vollständig sichtbar steht.

Zum Vergleich das bekannte RGB:

1
2
3
p.rgb {
	color:rgb(255, 255, 255);
}

100% Weißer Text

Die alte Angabe von Farben in RGB bietet uns diese Möglichkeit nicht.

Anwendungen

Kleine Ursache, große Wirkung..

Da RGBa kann überall dort verwendet werden, wo color zum Einsatz kommt. Als Schriftfarbe habt ihr es eben gesehen, es bieten sich uns aber noch andere Anwendungsmöglichkeiten an:

RGBa als Hintergrundfarbe

1
2
3
p.trans {
	background-color:rgba(200, 0, 255, 0.5);
}

Dieser Absatz hat einen zu 50% transparenten, lila Hintergrund (sieht auf weißem Hintergrund wie Rosa aus).

RGBa als Rahmenfarbe

1
2
3
p.trans {
	border:8px solid rgba(0, 180, 0, 0.25);
}

Dieser Absatz hat einen zu 75% transparenten, grünen Rahmen.

Vor- und Nachteile

Häh, das kann ich doch auch mit PNGs und Opacity machen, wozu brauch man das?

Das stimmt wohl. Der entscheidende Vorteil von RGBa ist jedoch, dass ich mir die PNG Datei und den dazugehörigen HTTP-Request sparen kann. Opacity (was es übrigens offiziell auch erst mit CSS3 gibt) hingegen macht leider nicht nur den Hintergrund, sondern auch den Inhalt des Elements transparent.

Der Nachteil von RGBa ist noch ganz klar die fehlende Unterstützung des IEs. Wenn man es sich erlauben kann, sollte man daher einfach eine Fallbacklösung in Betracht ziehen. D.h. dass man dem IE anstatt der RGBa Werte einfach nur die äquivalenten RGB Werte übergibt:

Lösung für den IE

1
2
3
4
p.trans {
	color:rgba(0, 180, 0, 0.25); /* der IE ignoriert diese Zeile */
	color:rgb(190, 230, 190); /* entspricht in etwa der selben Farbe */
}

Fazit

RGBa wird sich, wenn es das nicht schon bei vielen getan hat, durchsetzen. Es ist sehr flexibel und hat im Grunde keine Nachteile. Durch den Wegfall von unnötigen halbtransparenten PNG Dateien spart man außerdem Traffic und die Seite kann schneller geladen werden.

Ich hoffe die Beispiele waren hilfreich und wünsche euch viel Spaß beim experimentieren! Bis zum nächsten Mal. :)

Die hier könnten dich auch interessieren…

4 Kommentare RSS

Kaloeffel

Ich bin mir noch nicht so ganz sicher, ob es mir gefällt, dass alles was man früher mit Bildern gemacht hat nun 1:1 in CSS übernommen wird, statt sich ein neues Konzept auszudenken. So ein Ascii basierter Vektor wäre doch was. Man könnte wohl alles machen, was CSS3 Befehle wie border-radius, gradiant, opacity usw tun sollen, aber auch neues wie Formen, mit denen man zB Sprechblasen mit variabler Größe designen könnte. Die Dateien wären dann höchstens so groß wie ein Stylesheet, hätten aber visuell mehr zu bieten, als wenn man – wie jetzt – nur nach ein paar Sachen ausschau hält und die dann einfach übernimmt.

Norman

Natürlich könnte man das aber CSS ist doch viel einfacher und schneller. SVGs gewinnen doch auch zunehmend an Bedeutung, aber auch hier hängt der IE und auch noch einige der modernen Browser hinterher (Firefox eingeschlossen). Aber niemand hindert dich daran, Vektorgrafiken zu benutzen. Es ist ja auch nicht so, dass man mit CSS alles machen kann.
Ich versteh nicht, warum man sich ein neues Konzept ausdenken soll, wenn man das Potential der derzeit vorherrschenden Konzepte nicht mal richtig ausnutzt. Außerdem muss jedes Konzept erst neu erlernt werden und trägt irgendwie nicht dazu bei, das Web zu vereinheitlichen oder zu vereinfachen, meinste nich? ;)

Alex

Ich finde es gut dass »RGBA« eingeführt wird/wurde. Mit Opacity kommt man nicht weit, mit »RGBA« sind die Welten schon viel offener und dadurch können den Benutzer auch mehre Möglickeiten der Seitenanzeige zur Verfügung gestellt werden.

Wer RGBA nicht mag, muss es auch nicht nutzen. Ich werde es demnächst + Fallback einsetzen, man muss damit die Seite nicht verunstalten ;)

Schade dass der IE immer eine »Extrawurst« benötigt und auch immer schön hinterher hinkt, auch wenn ich Ubuntu nutze, denke ich trotzdem an dem IE…

Daniel

Hi, vielen Dank für deinen Blog :)

Ich finde Css 3 sehr vielversprechend und werde es sicher in meiner website anwenden.

MfG Daniel

P.S.: 1. Kennst du ein gutes Buch welches die Neuerungen und die Funktionen mal klar darstellt ?

2. Du kannst gut erklären und deine Seite sieht auch gut aus, mach weiter so !

Kommentieren