PNG-24 Alpha Tranzparenz und der Internet Explorer

Noch vor einigen Wochen feilte ich an einem ansprechenden Design für meine Webapplikation WOTAN. Ich habe mir rund 30 Stunden Zeit genommen um ein Designkonzept für die gesamte Anwendung auszuarbeiten und zu implementieren. Zusätzlich hiess das für mich auch diverse Layouts und Bilder im Gimp zu erstellen. Für mich als Nicht-Webdesigner und absoluten unkreativen Kopf bedeutet dies viel Arbeit. Schlussendlich hatte ich jedoch ein Design komponiert dass mir ausserordentlich gut gefiel. Es war schlicht und echt funky . Leider nutzte ich dazu ausgiebig das Transparenzlayer (Alphalayer) des PNG-24 Formates (Portable Network Graphics). Wie sich herausstellte weiss der Internet Explorer aus dem Hause Microsoft damit nicht so recht etwas anzufangen. Die Bereiche meiner Bilder, die teil- bzw. volltransparent hätten dargestellt werden müssen wurden schlichtweg weiss oder schwarz wiedergegeben. Zwar bietet sich auch die Option, Transparenz sowie Transparenzübergänge bzw. Transparenzverläufe mit dem GIF Format (Graphical Interchange Format) zu implementieren, allerdings bietet dieser Standard eine zu geringe Anzahl an Alphakanälen. Namlich ziemlich genau 1 Bit, also einen Alphakanal. Transparenz mittels GIF sieht deshalb in der Praxis recht unschön aus. PNG bietet als Plattform übergreifender Standard 8- oder 16-Bit-Alphakanäle an, die damit weitaus mehr Transparenzstufen zulassen. Und so begann mein Kampf.

Lösung für das IMG-Tag

Nach kurzer Zeit erfuhr ich, dass das Problem konkret nur für die Internet Explorer ab Version 5.5 bis 6.x lösbar sind. Für den IE7 & 8 besteht Userberichten zu Folge kein Handlungsbedarf. Die kritischen Versionen des IE verlangen zur korrekten Darstellung ein über DirectX gefilteres PNG. Das Markup

<div style="background-color: #567890; width: 480px; height: 280px;">
	<img src="test.png" width="420px" height="250px" style="border: 2px solid black;"
		alt="Ein Testbild" />
</div>

wird dann im konkreten Fall im IE 6.0 wie folgt dargestellt.

Die Referenz hingegen, hier Opera 9.2, interpretiert die Alphakanäle korrekt.

Damit auch der IE das gewünschte Verhalten zeigt, muss ein Filter benutzt werden. Dieser wird explizit über eine Styleangabe gesetzt.

<div style="background-color: #567890; width: 480px; height: 280px;">
	<img src="test.png" width="420px" height="250px"
		style="border: 2px solid black; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');"
		alt="Ein Testbild" onload="this.src='spacer.gif'" />
</div>

Nun zeigt auch der IE das Bild mitsamt Transparenz an.

Was einem Kenner direkt ins Auge stösst ist natürlich das nun neu eingeflossene spacer.gif. Dies hat seine Daseinsberechtigung. Was der IE bei Aufruf des Filters tut ist folgendes: Er erzeugt ein neues gefiltertes Bild aus der im IMG-Tag angegebenen Quelle und positioniert es anschliessend unter dem Originalbild. Somit ist das gefilterte Bild eigentlich nicht zu sehen. Es sein denn, das originale Bild wird nach der Filterung durch ein transparentes Bild ersetzt. Dieses transparente Bild ist in diesem Fall das spacer.gif. Es ist ein Pixel x ein Pixel gross und ersetzt nach dem Laden der Seite das originale PNG.

Selbstverständlich gibt es zu diesem Thema auch hübschere Umsetzungen, als meine zu Erklärungszwecken hier gezeigte. Beispielsweise sei hier auf http://homepage.ntlworld.com/bobosola/ verwiesen. Dort gibt es ein Stück herunterladbares JavaScript, dass über

<!--[if lt IE 7]>
	<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

eingebunden werden kann und dafür sorgt, dass alle IMG-Tags, welche ein PNG-Image referenzieren auf die beschriebene Weise gefiltert werden.

Lösung für durch CSS gesetzte Backgrounds

Ähnlich wie für IMG-Tags sieht auch die Lösung für über CSS gesetzte Hintergrundbilder aus. Ich nutze für Wotan die Möglichkeit der bedingten Inkludierung von CSS zum Überschreiben von Styleklassen wenn es sich beim UserAgent um den IE < 7 handelt:

<!--[if lt IE 7]>
	<link rel="stylesheet" href="../styles/funky_IEFixes.css"  type="text/css" />
<![endif]-->

In diesem CSS-File befinden sich die folgenden zwei Styleklassen, die die für alle Browser gültigen Styleklassen ergänzen bzw. spezielle Attribute überschreiben:

.layoutBoxLeft {
	background-image: none;
	filter: progid :   DXImageTransform.Microsoft.AlphaImageLoader ( src =
		'../images/funky/shadow_left.png', sizingMethod =   'scale' );
}

.layoutBoxRight {
	background-image: none;
	filter: progid :   DXImageTransform.Microsoft.AlphaImageLoader ( src =
		'../images/funky/shadow_right.png', sizingMethod =   'scale' );
}

Für Backgrounds benötigt man keinerlei spacer.gif da im CSS für den IE direkt background-image: none festgesetzt werden kann.

Anwendungsprobleme

Trotz der hier beschriebenen Lösungsvorschläge habe ich noch weitere Schwierigkeiten mit dem Internet Explorer in diesem Kontext feststellen können: Ich habe ein Form über ein mit dem Alpha Filter gefiltertes Hintergrund-PNG gelegt. Als Folge des Filtervorgangs des IE war es mir nicht mehr möglich den Cursor in die Controls des Formulars zu positionieren. Eine Eingabe über dieses Form war somit nicht mehr möglich. Zu diesem Problem ist mir bislang noch keine Lösung bekannt. Falls einer der Leser eine Lösung kennt, möge er sie bitte hier in Form eines Kommentares posten. Ich wäre sehr dankbar