PNG-Alphatransparenz im Internet Explorer 6

PNG-Alphatransparenz im Internet Explorer 6

Dieser Beitrag wurde vor mehr als 13 Jahren veröffentlicht. Daher kann es sein, dass sein Inhalt oder ein Teil davon nicht mehr aktuell ist.

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.

2 Kommentare

  1. Mir gefällt die Lösung nicht. Denn wer schon den IE6 braucht, sollte seiner eigenen Sicherheit wegen wenigstens JavaScript blocken. Daher warum so, wenn es auch eine CSS-Lösung gibt?

    <code><!–[if lt IE 7]>–>
    #testdiv { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparentesbild.png'); }
    </code>

    Geht halt nur für Hintergründe ;-)

  2. Soweit ich es weiß wird auch filter nur mit aktivierten JS genommen. Und die die den IE6 benutzen, haben sicherlich keine Ahnung davon ob sie JS benutzen oder nicht und wie sie es abschalten.

    In Firmen wird es evtl. aus sein aber auch in vielen Fällen an, da die internen Anwendungen JS benötigen.

    Und dadurch, dass deine Methode nur für Hintergründe geht, fällt sie leider für mich raus.

    Abgesehen mal davon: Wer den IE benutzt ist selbst Schuld und wer sich dann noch ohne JS die Möglichkeit nimmt Seiten aktuell darstellen zu lassen ist für mich komplett draußen.