Da ja der Internet Explorer 5 so gut wie ausgestorben ist, steht dem Einsatz von PNG im Websites nichts mehr im Wege. Jedenfalls wurde das in der Vergangenheit mal von mir behauptet. Nun ist es an der Zeit, das Ganze auch einmal auszunutzen.

Das große Plus von PNG ist Alpha-Transparenz, die dem Webdesigner einiges erleichtert; der Nachteil ist die mangelhafte Unterstützung in älteren Versionen (6, 5.5) des Microsoft Internet Explorer. Und zumindest der IE6 wird uns noch einige Zeit erhalten bleiben. Das muss uns nicht aufhalten, allerdings sollten die Einschränkungen der im Folgenden beschriebenen Techniken beachtet werden!

Was ist .htc?

Sucht man im Internet nach nach einer Lösung für das Problem, findet man eine ganze Reihe Abhilfe versprechende .htc-Dateien. Bei .htc handelt es sich um DHTML-Scripts, mit denen man dem Internet Explorer neue Sachen beibringen kann.

For Microsoft Internet Explorer 5 and later, HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component; it is saved with an .htc extension.

Beispielsweise sorgt ein solches Script dafür, dass die CSS-Navigation von Kram-hochladen.de auch im IE funktioniert - die vom Internet Explorer normalerweise nur rudimentär vorhandene Unterstützung für die CSS-Pseudoklasse :hover wird durch die .htc als DHTML-Script simuliert. So lange der IE-Surfer Javascript nicht abschaltet, merkt er davon nichts.

PNG für IMG-Elemente

Mit .htc-Dateien kann man auch dem Internet Explorer 6 und 5 PNG-Support für <img>-Elemente einreden. Von den vielen Scripts die man hierzu finden kann, empfehle ich PNG Behavior von WebFX, denn es funktioniert im Gegensatz zu vielen anderen perfekt und kann frei benutzt werden:

Notice that the PNG Behavior does not require any license. You may use it in any way you see fit as long as credit is given where credit is due. In other words, don't claim you create it and don't try to make money directly from it.

Was genau macht nun pngbehavieror.htc? Streng genommen ist die Behauptung Der IE kann keine transparenten PNGs nicht ganz richtig. Er kann schon, man muss ihm nur mit etwas MS-eigenem CSS auf die Sprünge helfen. Ein wie folgt eingebundenes PNG würde im IE vollkommen problemlos dargestellt werden:

<img
    src="unsichtbar.gif"
    style="width:100px;
           height:100px;
           filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');"
/>

Es wird also anstelle der eigentlichen Grafik ein unsichtbares GIF eingebunden und das PNG mit einem speziellen Microsoft-Filter darübergehext. Das ist natürlich in dieser Form keine Lösung für den normalen Einsatz, aber genau an dieser Stelle hilft uns PNG Behavior. Das Script in .htc-Datei durchforstet nämlich den Quelltext der Seite nach PNG-Dateien und wendet auf sie den Filter an. Der Einbau eines .htc-Scripts ist denkbar einfach und wird via CSS durchgeführt:

img {
    behavior:url('pngbehavior.htc');
}

Da die CSS-Eigenschaft behavior beim CSS Validator für Unmut sorgt, ist es ratsam obrige CSS-Zeile in einen IE-spezifischen Stylesheet zu verfrachten, der via Conditional Comments eingebunden wird. Zwingend notwendig ist das nicht, da nur der IE etwas mit behavior anfangen kann - alle anderen Browser irgnorieren diese Angabe.

In PNG Behavior von WebFX kann man in Zeile 45 der Datei pngbehavior.htc noch genauer festlegen, welche PNGs vom Script bearbeitet werden sollen und welche nicht. Auch sollte in Zeile 48 der Pfad zum unsichtbaren GIF überprüft werden; stimmt dieser nicht, sind PNGs zwar transparent, aber von einem hässlichen Rahmen umgeben.

Nach dem Einbinden der .htc-Datei via CSS und der Anpassung der Zeilen 45 und 48 in pngbehavior.htc stellen IE5.5 und IE6 PNG-Bilder fehlerfrei dar.

PNG für CSS-Hintergründe

Obwohl es Scripts geben soll, die auch die Transparenz von Hintergrund-PNGs korrigieren können sollen, konnte ich keines finden, das wirklich funktionierte. Das macht allerdings nichts, denn meist sind ja Hintergrundbilder ohnehin per CSS-Datei und nicht als Inline-Anweisung realisiert. Da bietet es sich an, den PNG-Filter für betroffene Elemente einfach in den gleichen IE-spezifischen Stylesheet einzubinden, in dem schon die behavior-Anweisung steht. 

/* style.css */
div.box {
    background:url(img/zb_mid.png) repeat-y top center;
}

/* ie.css */
div.box {
    width:640px;
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/zb_mid.png');
}

Es wird also im IE-Stylesheet einfach der Hintergrund ganzlich entfernt und stattdessen das PNG mit dem Microsoft-Filter geladen. Dieser besteht außerdem in jedem Fall auf eine Breitenangabe des betroffenen Elements, was aber auch kein Problem darstellt.

Zusammenfassung

Alle Internet Explorer, die aktueller als Version 5 sind, können transparente PNGs darstellen. Allerdings muss man es allen die älter als Version 7 sind erst klar machen. Das geschieht für <img>-Elemente mittels PNG Behavior fast automatisch und bei Hintergrundbildern durch das manuelle Aufrufen des IE-eigenen PNG-Loaders. Weil alles in einem IE-eigenen Stylesheet stattfindet (Conditional Comments), beklagt sich darüber auch kein Validator und kein anderer Browser.

Es gibt also wirklich keinen Grund mehr, sich in Sachen PNG zurückzuhalten. Die Seite von Neff ist ein Beispiel die oben erklärten Techniken.

Nachtrag I (11. April, 13:25 Uhr)

Bitte dringend die untenstehenden Kommentare lesen! Es scheint, als würde Windows XP SP2 die .htc-Dateien nicht ohne weiteres von Apache-Servern annehmen. Wer das fragliche Betriebssystem zur Hand hat, möge bitte testen ob Hayungs.de jetzt korrekt dargestellt wird und seinen Befund als Kommentar hinterlassen.

Nachtrag II (13. April, 1:30 Uhr)

Bitte dringend lesen: PNG ohne Reue - Die Einschränkungen! Das ist der Folgeartikel zu diesem und befasst sich mit Problemen bei der Benutzung der in diesem Artikel beschriebenen Techniken.

Nachtrag III (9. Mai, 16:20 Uhr)

Einen nicht überraschenden, aber doch wichtigen Hinweis zu Formularen auf transparentem Hintergrund im Internet Explorer möchte ich an dieser Stelle auch nicht unerwähnt lassen.