PNG im Internet Explorer

Transparente PNG-Grafiken ermöglichen die Gestaltung von schönen und effektvollen Webseiten. Sie können den Hintergrund durchschimmern lassen und haben nicht den von GIF-Grafiken bekannten verfranzten Rand (siehe z.B. die BcxP-Clan-Seite). Die heutigen, modernen Web-Browser kommen inzwischen alle ohne Probleme mit solchen Grafiken zurecht. Alle? Nicht ganz. Der Microsoft® Internet Explorer in der Version 5.5 bis 6.x benötigt hier eine gesonderte Handhabung…

Um diesen Browser dazu zu bewegen, die normierte Transparenz einer PNG-Datei anzuzeigen, müssen einige Kniffe vollzogen werden. Der Grundschritt besteht im Einsatz des Microsoft-Filters AlphaImageLoader. Bei Grafiken, direkt im Inhalt einer Seite, kann der Internet Explorer mit folgendem Konstrukt zur Transparenz überredet werden (für diesen Anwendungsbereich gibt es im Web auch unterschiedliche JavaScript-Programme, welche nachträglich alle IMG-Tags entsprechend erweitern. Bitte beachten: Wenn mittels der Filteranweisung ein Bild einem IMG-Tag hinzugefügt wird, dann sollte die Source auf ein transparentes GIF zeigen.):

<img src="blank.gif" width="xxx" height="xxx" alt="xxx" style="filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bild.png');" >

Werden allerdings PNG-Grafiken mittels CSS-Definitionen als Hintergrundbilder in HTML-Elemente wie z.B. dem DIV eingesetzt, muss man schon mehrere Schritte unternehmen:

Es muss unterschieden werden, ob ein moderner Browser oder der Internet Explorer 5.5 — 6.x die Webseite besucht.
Für den Internet-Explorer muss der Filter im Cascading Style Sheet (CSS) angegeben werden.
Hyperlinks in HTML-Elementen mit PNG-Hintergrund müssen ggf. gesondert behandelt werden.

1. Die Browser-Weiche

Das Ziel dieser Weiche besteht in der Ermittlung des Browsers, welcher eine Anfrage an den Webserver stellt. Dies ist von Nöten, da wir für den Internet Explorer eine spezielle Filterdefinition im CSS (siehe unten) benötigen, die wiederum andere Browser nicht verstehen.

Die PHP-Weiche

Es gibt unterschiedliche Möglichkeiten das Problem mit der Filterzuordnung zu lösen. Eine von mir bevorzugte Lösung besteht darin, unterschiedliche Style-Sheet-Dateien zu erstellen, eine für moderne Webbrowser und eine für den Internet Explorer 5.5 — 6.x. Diese Dateien können dann abhängig vom Browser-Request in die Webseite eingebunden werden. Der fragende Browser kann mittels PHP ermittelt werden. Der Aufruf “<?php echo $_SERVER ["HTTP_USER_AGENT"]; ?>” liefert hier beispielsweise “Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)”. Bedient man sich nun der PHP-Funktion strstr(), kann man feststellen, ob ein bestimmter Teilstring in dieser Angabe vorkommt. Uns interessiert hier das Vorkommen von “MSIE 5″ und “MSIE 6″ (Der Internet Explorer 7 kommt mit PNG-Grafiken zurecht, versteht allerdings auch die Filter. Theoretisch reicht auch eine Prüfung auf ausschließlich “MSIE”). Eine PHP-Weiche könnte nun folgendermaßen aussehen:

<?php
    if ((strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 5"))
        ||
        (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 6"))) {
?>
    <style type="text/css" media="screen">
        /* IE 5-6 : modifiziere Hauptstylesheet
                    oder binde neues ein  */
    </style>
<?php
    } else {
?>
    <style type="text/css" media="screen">
        /* moderne Browser: modifiziere Hauptstylesheet
                            oder binde neues ein  */
    </style><?php
    }
?>

Die Kommentar-Weiche in der HTML

Ein weiterer Weg besteht im Einsatz einer Kommentar-Weiche direkt im HTML-Code, welche der Internet-Explorer versteht. Hier kann sogar ein Versionsvergleich des Browsers eingebaut werden. Das folgende Beispiel definiert eine CSS-Anpassung speziell für den IE zwischen der Version 5.5 und 6.x.

<!--[if lt IE 7]>
<!--[if gte IE 5.500]>
    <style type="text/css">
        /* definiere hier speziell für den Internet Explorer */
    </style>
<![endif]-->
<![endif]-->

Der CSS-Hack

Es ist nicht wirklich schön, aber eine weitere Möglichkeit der Unterscheidung besteht im Ausnutzen der differenzierten Interpretation der CSS-Definitionen. Der Internet Explorer in der Version 5.x‑6.x versteht die CSS-Schreibweise “html > body #TagID {}” nicht. Dafür kommt er als einziger mit der Schreibweise “* html #TagID {}” zurecht (für ihn ist also das HTML-Element nicht das Root-Element). So ist es uns möglich, zwei unterschiedliche CSS-Definitionen für ein und dasselbe Element in eine CSS-Datei einzubinden. Dies geht allerdings nur solange gut, wie die Browser entsprechend nicht dazu lernen! (siehe auch: Webseite von Kristof Lipfert).

2. Microsoft-Filterdefinition im CSS

Für den Internet-Explorer muss der Microsoft-Filter AlphaImageLoader im Style-Sheet angegeben werden. Dieser Filter lädt das PNG Bild ein und präsentiert dieses mitsamt der Transparenz. Der Parameter sizingMethod='scale' sorgt dafür, dass das Bild ggf. gestreckt oder in einer Wiederholung dargestellt werden kann.
ACHTUNG: Die Bild-URL in der Filterdefinition darf keine Sonderzeichen, wie z.B. ein Leerzeichen enthalten, ansonsten kann es passieren, das sich das PNG-Hintergrundbild des entsprechenden HTML-Elements (meist DIV) ungewollt an die obere Kante des Vorgänger-Elements ausrichtet! Auch sollte hier die URL immer komplett angegeben werden.
Das folgende Beispiel definiert für ein HTML-Element ein PNG-Hintergrundbild, welches in den unterschiedlichen Browsern mit richtiger Transparenz dargestellt wird (es wird der CSS-Hack eingesetzt).

#elementID {  		     /* für alle Browser gültig */
        /* PNG im Hintergrund wiederholen */
        background-repeat: repeat;
        background-position: center top;
}
html > body #elementID {     /* moderner Browser */
        background: url("./background.png")
}
* html #elementID {          /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://.../background.png", sizingMethod="scale");
}

3. Herstellen der Link-Funktionalität

HTML-Elemente (z.B. DIV-Tags), welche Links umschließen und eine PNG-Datei als Hintergrundbild enthalten, verhindern im Internet Explorer ⁵⁄₆ ggf. die korrekte Funktionalität der Hyperlinks. Diese lassen sich meist nicht mehr anklicken. Hier gibt es einen an sich unerklärlichen Trick der angewendet werden muss: die Link-Tags <a> werden mittels CSS explizit relativ positioniert:

*a {position: relative;}

Damit dies auch wirklich zum erwünschten Ergebnis führt, dürfen die Elemente mit PNG-Hintergrund, in denen solche Links enthalten sind, NICHT relativ positioniert werden!

8
AUG