Im Juli nahm ich am CSS Summit teil, einer Online-Konferenz zum spezifischen Thema CSS. Ich würde behaupten mich mit CSS gut auszukennen, doch unter anderem diesen einen kleinen Trick konnte ich aus dem Vortrag von Dave McFarland mitnehmen: Cross-Browser rgba().

Rgba() ist eine Methode um Alphatransparenz mit Farben zu benutzen, im Gegensatz zu Opacity kann man so halbtransparenten Text auf einem Hintergrundbild machen oder halbtransparente Hintergrundfarben. Nachteil der Technik: Sie ist nur für Firefox (ab Version 3), Safari und Opera 10 verfügbar. Andere Browser tun einfach nichts, wenn sie auf diese unbekannte Angabe stoßen. Beispiel:

background-color: rgba(255,255,255,.3);

Diese Angabe zeigt in den oben genannten Browsern eine halbtransparenten, weißen Hintergrund an. Andere Browser zeigen nichts an, also „Volltransparenz“, wenn man so will. Man kann sich dadurch behelfen, dass man ihnen vorher eine Hintergrundfarbe ohne Transparenz angibt:

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.3);

Alle CSS2.1-fähigen Browser zeigen nun einen rein weißen Hintergrund an, wenn sie diese beiden Regeln sehen, da sie die zweite „einfach“ ignorieren. Diese Art von (nicht-)transparentem Hintergrund funktioniert auch im IE8, im Firefox 2 und Opera. Doch für IEs gibt es eine Möglichkeit ebenfalls transparente Farben zu nutzen (obwohl es natürlich nicht halb so schön ist wie rgba()).

Im IE nutzen wir die proprietären Filter um den Effekt zu erzeugen. DXImageTransform.Microsoft.gradient kann nämlich nicht nur Farbverläufe zeichnen, sondern auch halbtransparente Farbverläufe. Wenn sich die Verlaufsfarben dabei nicht verändern bedeutet das faktisch eine halbtransparente Fläche.

Indem wir unserem Element nun folgenden Code mitgeben bekommt es in IEs<8 eine transparente Fläche:

filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);

Erklärungsbedarf benötigen sicher die startColorstr und endColorstr-Werte. #4CFFFFFF ist ein Hex-Wert, der sich aus zwei Bestandteilen zusammensetzt: #4C als Grad der Transparenz (#4C = hex(.3*255)) und #FFFFFF für die Farbe.

Das Problem im IE8, da er die CSS-Regeln beachtet hat er ja den weißen Hintergrund für die älteren Browsermodelle. Das müssen wir ihm noch abgewöhnen. background-color: transparent9; wird nur vom IE8 verstanden (fragt nicht warum, ich hab’s bei Dirk gefunden).

Noch einmal das gesamte CSS auf einen Blick:

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.3);
background-color: transparent9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;

Also: Wir setzen eine Standard-Hintergrundfarbe, überschreiben sie für Moderne Browser mit der halbtransparenten Variante, entfernen sie aber für den IE8 ganz. Dann benutzen wir den IE-Filter um einen halbtransparenten Gradient ohne Farbwechsel zu erzeugen. Und zum Schluss geben wir dem Element noch hasLayout, das braucht der IE6 nämlich um den den Trick überhaupt darzustellen (und schadet ansonsten niemandem).

Beispiel- und Testseite

(Wer Transparenz auch für FF2 und OP<10 benötigt sollte das mit einem halbtransparentes PNG bewerkstelligen oder alternativ Dirk Jesses Lösung benutzen, die aber ein zusätzliches, rein zu Präsentationszwecken eingefügtes div benutzt – und dessen Beitrag mich zu diesem Beitrag inspiriert hat.)

10 Gedanken zu „Cross-Browser rgba()

  1. Interessant zu wissen, dass es schon irgendwie geht, den IE zur transparenten Farbdarstellung zu bewegen, in Einzelfällen vielleicht mal anwendbar.
    Wenn ich allerdings dieses Code-Monster für die Angabe einer einzigen Farbangabe sehe, lass ich es lieber. Das kann sich ja kein Mensch merken.
    Besser finde ich es weg zu kommen von der Vorstellung, in jedem Browser die gleiche Darstellung erzielen zu wollen.

  2. Na ja, du kannst ja für den IE conditional comments verwenden. Viele Seiten so auch die bekannte complexspiral Demo von Eric Meyer nutzen mehre Bilder um einen “durchscheinenden” Effekt zu entwickeln. Die Möglichkeit über rgba() spartt somit schon ein paar Requests und schont die Bandbreite.
    Das dass der IE auch kann, rundet die ganze Sache ab.

  3. Ich denke hier Conditional Comments zu verwenden ist aus einer Wartungsperspektive sehr ungeschickt, man muss die Farben dann nämlich in bis zu drei verschiedenen CSS-Dateien ändern und das führt sicher dazu, dass hier und da was vergessen wird. Da mag ich es viel lieber alle Eigenschaften auf einem Blick in einer Datei zu haben.

    und fwolf: Du magst nicht wirklich, dass ich auf deinen Kommentar eingehe…

  4. Offensichtlich liest Konqueror 4 (hier 4.3) den vermeintlichen IE8-Hack “transparent/9” und zeigt volle Transparenz. Reihenfolge vertauschen: also erst background-color: transparent/9; dann background-color: rgba(255,255,255,0.5); scheint es dann aber wieder zu retten.
    Mal wieder ein gutes Beispiel, warum man solche Hacks nur mit ganz spitzen Fingern anfassen sollte.

  5. Da das Ganze durch noch mal ein anderes Verhalten in Konqueror 3 und die Tatsache, dass mir Eclipse bei jedem Formatieren der CSS-Datei die filter: – Regeln vollkommen zerhauen hat bin ich doch bei einer zusätzlichen CSS-Datei (ie-trans.css per CC für if IE eingebunden) gelandet. Selektor-Hacks für aktiv entwickelte Browser sind mir persönlich zu heiß.

Kommentare sind geschlossen.