PNG-Alphatransparenz im Internet Explorer 6

Wie man aus mehreren meiner Artikel weiß, habe ich etwas gegen den Internet Explorer 6 und möchte ihn auch gar nicht mehr weiter unterstützen. Auf vielen Seiten geht das aber nicht anders, da der Großteil der Besucher aus mehreren Gründen nicht zu einem Update in der Lage ist. Aus diesem Grund kann man auf Seiten nur vereinzelt PNG-Grafiken benutzen, welche Halbtransparenzen beinhalten, denn diese kann der IE6 nicht richtig darstellen – mit DD_belatedPNG ist es möglich diese Funktion nachzurüsten.

Das Problem hatte ich erst wieder bei der Erstellung meines neuen Designs für den Wishu-Blog. Der RSS-Button oben im Header hat Alphatransparenzen und ist somit im IE6 mit einem grauen Hintergrund unterlegt. Ich könnte jetzt das Bild natürlich bearbeiten, sodass es den blauen Hintergrund meines Headers annimmt, doch das würde wieder zusätzliche Arbeit machen, wenn sich die Farbe dort mal ändert.

Ich könnte es ebenso in ein GIF-Bild umwandeln. Die Halbtransparenzen werden dann umgewandelt und man kann es ohne grauen Hintergrund einfügen. Doch leider werden die runden Ecken dadurch ziemlich pixelig und ausgefranst. Also fällt diese Möglichkeit auch weg.

Also bleibt nur noch die Möglichkeit dem IE6 beizubringen Alphatransparenzen auch darzustellen. Dazu gibt es mehrere Skripte, welche unter dem Begriff PNGfix bekannt sind. Ein PNGfix bringt dem IE6 mit JavaScript bei, die Alphatransparenzen darzustellen und somit die Bilder ohne Kompromisse zu rendern.

Wenn man sich also nicht mehr Arbeit machen möchte und auch verpixelte Ränder nicht ertragen kann, ist die einzige Alternative der PNGfix.

Mein Lieblingsskript ist an dieser Stelle DD_belatedPNG. Mit diesem Skript kann man leicht Klassen oder Elemente bestimmen, auf die diese Möglichkeit angewendet werden soll, somit hat es vielen Skripten etwas voraus, welche zum Beispiel nur den img-Tag unterstützen oder eine zusätzliche Klasse in dem Element unterstützen.

Im Head-Bereich jeder Seite – oder auch in der Header-Datei, welche per PHP inkludiert wird – muss folgender Code eingefügt werden:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]--> 

Dazu muss man noch die unkomprimierte (nur für Entwickler) oder komprimierte (Platzsparender) Version des Skripts einfügen und die Klassen, IDs und/oder Elemente bestimmen, welche betroffen sein sollen. Dies tut man indem man einfach in der Funktion die Klassen, IDs und/oder Elemente mit Komma voneinander trennt.

Ein Beispiel in dem die Klasse wichtig, die ID navi und das img-Tag angesprochen werden:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.wichtig, #navi, img');
</script>
<![endif]-->

Man sieht also, es ist relativ leicht diesem PNGfix zu benutzen und hat somit später wesentlich weniger Aufwand. Und diejenigen, die kein JavaScript aktiviert haben und mit dem IE6 surfen, sind erstens selbst Schuld und zweitens können sie damit sicherlich leben, da sie das ja schon kennen müssten.