Ich schraube im Moment an einem Projekt, bei dem ein Designer vielen Elementen einfarbig teiltransparente Hintergründe verordnet hat. Nun gibt es ja dank CSS3 Möglichkeiten, so etwas in Form einfacher Farbangaben (RGBa oder HSLa) einzubauen – allerdings ist es natürlich wie immer so, dass diese Features mit einem eklatanten Mangel an Browserunterstützung zu kämpfen haben. Schuldig im Sinne der Anklage ist neben dem Internet-Explorer-Clan auch Opera.

Warum keine PNG-Datei?

Theoretisch könnte man zur Lösung dieses Problems einfach ein 1×1 Pixel großes teiltransparentes PNG hernehmen und als Hintergrundbild verwenden. Das würde in Opera funktionieren und im IE könnte man sich das Ganze mit dem AlphaImageLoader zurechthacken. Gänzlich problemlos wäre das freilich nicht:

  1. Es müsste pro zusätzlicher Hintergrundfarbe mit einer zusätzlichen Bilddatei jongliert werden, für die auch bei jedem Seitenaufruf ein zusätzlicher HTTP-Request anfallen würde
  2. Die Verwendung des AlphaImageLoaders blockiert beim betroffenen Element bekanntlich interaktive Kindelementen (Links, Formulare), die dann nicht mehr benutzbar sind ohne ihrerseits mit position und z-index versehen zu sein

Je nach Art der Seite und Einsatzgebiet des Hintergrundes sind das durchaus Dinge, auf die man gerne verzichten kann. Also ran an die Trickserei.

Internet Explorer 6 und 7

Die Lösung ist beim IE die Verwendung eines Filters, der anders als der AlphaImageLoader keine negativen Effekte auf Kindelemente hat:

#test {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FF0080,endColorstr=#99FF0080);
}

Mit dem Gradient Filter zeichnet man einen Farbverlauf, der praktischerweise Transparenz unterstützt. Bei einem Farbwert wie beispielsweise #99FF0080 bestimmen die ersten beiden Stellen (in diesem Fall 99) die Transparenz, der Rest ist eine altbekannte Hex-Farbangabe. Und wenn man einen Gradient mit zwei identischen Farbangaben notiert, erhält man eine schöne, gleichmäßige transparente Hintergrundfarbe.

So haben sich die Microsoft-Programmierer den Einsatz ihres Filters vielleicht nicht unbedingt vorgestellt, aber trotzdem bekommt man so einen schönen transparenten Hintergrund im IE 6 und 7.

Opera und alle anderen Browser

Bei den übrigen Browsern (Safari, Chrome, Firefox, Opera, IE8) gibt es diverse Möglichkeiten, teiltransparente Hintergrundfarben zu notieren – zum Beispiel verstehen Firefox und Safari bekanntlich die RGBa-Syntax aus CSS3. Eine einzige Möglichkeit wird aber von allen übrigen Browsern unterstützt: PNG-Grafiken als Base64-Codierte Data-URI.

Data-URIs erlauben es, den Inhalt einer eigentlich externen Datei in codierter Form innerhalb von HTML- und CSS-Dokumenten zu notieren. Das sieht dann meist so oder ähnlich aus:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAblQTFRFKQkAMhMAuDgAwUIAwkMAxUUAyEkAzEwA0FAA0lIA01QA1FQA2FgA3FwA3V0A318A4GAA4GEA42MA5WUA5mYA6GgA6WkA6moA////wUIA6moAAAAAAAAAAAAAAAAAFwQAHQoAoyMAxkYAw0QA6WkA6moAfxsAlTIAujoA1FQA01MA4GAAxkYA52gA6moApykAuz0A3l4A4WEArS0ArzAAsTIAszQAtjYAuDgAuToAuzwAyUoAzU0A0VEA1VUA2VkA3V0A4WEA4WIA5GQA5WUA5WYA52cA6GgA6WkA2m8exlET12IR8YUd7Ycl+6E964Ul+Z897IQi/aI8/aM8430X54Eb6oQe7ogi8owm8o4o85Is9JIs9ZUv9pAq9pUv95kz+Jkz+MaU+ZMt+Z03+ciW+pQu+p03+qFI+sye+6E7+8ub/JYw/KE7/M6g/Zcx/aQ+/aRL/aU//adR/cyc/cyd/eLG/erX/pgy/qdB/qhC/qlT/qpV/s6d/t/A/uLG/uvY/5kz/58//6ZN/6lD/6tW/79//7+A/9au/9ev/+DB/+TI//bt//fv//n0//r0//v3//z4//36////JF/UQAAAAFR0Uk5TAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwMDxcaHjU1ampzc3ODg5mZra26urq8vMbGzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNHS3d309Pf3+fn5O/LV9QAAANBJREFUGBlVwb1Lw0AYB+B7P3rJpdU4lYLQRUQncRb8/0dd62YHUcEaS+Oby93lp+ggPg+t3H8kyya09ENe7LMoNZe+ZmEvPjyMmz1T8JJTHCxmXFXBKbV1vp2eDkUXwV33z0rf7qqj8xKTMwaUiMnyWFaL/sMEUCHJN6mbzPloCjCRzh7H4xPpRIdxghJ5DN08zA46Twyo7D1fuF3xhjOU96KIAc5ZXg5gICaRdlrbzrptilv0b69sMd0LSxXqajaWONGaq9DgV7YIOiVyf4AvU0l0TgH1sPoAAAAASUVORK5CYII%3D" alt="Das Feed-Icon dieser Website">

Wirkt auf den ersten Blick etwas unhandlich, hat aber durchaus so seine Daseinsberechtigung. Die englische Wikipedia hat einen guten Artikel zu diesem Thema. Die Vorteile kurz zusammengefasst:

  1. Keine zusätzlichen HTTP-Requests
  2. Gerade bei kleineren Dateien höhere Übertragungsgeschwindigkeit
  3. Die Internet Explorer 6 und 7, die mit PNGs eh nur Probleme bekommen würden, unterstützen Data-URIs gar nicht erst.

Problematisch (weil unübersichtlich) kann es werden, wenn man seinen Stylesheet im Übermaß mit Data-URIs vollstopft, was sich aber mit ein wenig vorausschauender Planung verhindern lassen sollte. Jedenfalls kann man mit Data-URIs PNGs einfügen, ohne dass die IE-Familie Ärger macht oder viele HTTP-Requests entstehen. Man erstelle sich einfach eine 1×1 Pixel große PNG-Datei mit der gewünschten Farbe und Transparent, konvertiere sie mit einem der zahlreichen Online-Konverter (z.B. diesem hier) in einen Datenstrom und binde das Ganze als CSS-Hintergrund ein:

#test {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kFEhY5DjqCiFwAAAANSURBVAjXY/jP0FAPAAWAAf+rb6k5AAAAAElFTkSuQmCC);
}

Und fertig sind in allen Browsern funktionierende teiltransparente Hintergründe fast ohne PNG-Dateien – hier eine Testseite zum ausprobieren.

Lohnt sich das denn?

Nun bleibt natürlich die nicht ganz unberechtigte Frage, ob sich der ganze Aufwand lohnt. Das ist natürlich in erster Linie davon abhängig, wie sehr das Design auf transparente Hintergründe angwiesen ist – wenn das nicht so sehr der Fall ist, kann man sich die Mühe auch sparen und einfach abwärtskompatibles CSS3-RGBa verwenden:

#test {
	background:#FF0080;
	background:rgba(255, 0, 128, 0.5);
}

Wenn ein Browser RGBa nicht versteht, verwendet er statt dessen die zuletzt deklarierte Hintergrundfarbe, also in diesem Fall ein ganz normaler Hexcode. Falls man nur den älteren Internet Explorern die transparenten Hintergründe vorenthalten möchte, kann man anstelle des RGBa-Hintergrundes auch das codierte PNG verwenden und sich einfach den Gradient-Filter sparen.

Ansonsten finde ich diesen Trick nicht jetzt nicht so kompliziert, vorausgesetzt man plant ihn von Anfang an ein.