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.
Kommentare (9)
metax. ¶
10. April 2007, 15:46 Uhr
Hm, schöne Sache.
Hat das schonmal jemand auf allen IExplorern getestet?
Hier auf dem Business PC (Windows XP Prof, IE6, JavaScript an + DirectX 9) im Geschäft funktioniert das Beispiel leider nicht.
Und zu Hause habe ich keinen IE verfügbar.
Welche Konfigurationsvoraussetzungen könnten noch für diese Technik bestehen?
mfg, metax.
Peter ¶
10. April 2007, 17:32 Uhr
Welches Service Pack hast du drauf?
Gabraham-Himself ¶
10. April 2007, 18:57 Uhr
Sehr interessant.
Muss ich bei Gelegenheit mal testen, auch wenn ich vergleichbar wenig bis gar keine transparenten .png Dateien verwende.
metax. ¶
11. April 2007, 06:51 Uhr
Laut Systemeigenschaften Servicepack 2.
Jetzt ist nur noch die Frage, ob es an den vermurksten Business-Einstellungen liegt oder ob diese DXImageTransform-Technik allgemein nicht zuverlässig funktioniert.
Bisher habe ich das (manuell) auf meinen Sites nämlich auch verwendet (läuft hier ebenfalls nicht).
mfg, metax.
Peter ¶
11. April 2007, 11:21 Uhr
Dann glaube ich habe ich Lösung. Für WinXP SP2 müssen die HTC-Files als
text/x-component
gesendet werden, was der blöde Apache leider nicht macht. Sagt jedenfalls MS. Ich habe das gerade mal bei Hayungs eingebaut, kann das mal jemand testen? Ich habe hier leider nur Linux und Windows 2000.metax. ¶
11. April 2007, 11:51 Uhr
Nope, geht immer noch nicht...
png.png
Peter ¶
11. April 2007, 12:18 Uhr
Ich habe gerade 4 Systeme mit XP SP2 getestet/testen lassen. Bei denen klappt's.
Jeena Paradies ¶
12. April 2007, 21:07 Uhr
Wie positioniere ich so ein Alpha-PNG als Hintergrund im IE?
Peter ¶
12. April 2007, 23:32 Uhr
Das wird kompliziert. Diese Alpha-PNGs sind keine Hintergrundbilder im eigentlichen Sinne und können daher nicht ohne weiteres platziert werden. Kachelnde Hintergründe sind gar nicht möglich, dafür kann man Bilder strecken.
Für diese und andere Fragen und Probleme habe ich einen neuen Post geschrieben, wo alles nochmal detaillierter erklärt wird.
Ich mache die Kommentare hier zu, alle weiteren Anmerkungen und Fragen zu PNG bitte in den neuen Artikel.