PNG im Internet Explorer

Transparente PNG-Grafiken er­mög­li­chen die Gestaltung von schö­nen und ef­fekt­vol­len Webseiten. Sie kön­nen den Hintergrund durch­schim­mern las­sen und ha­ben nicht den von GIF-Grafiken be­kann­ten ver­franz­ten Rand (sie­he z.B. die BcxP-Clan-Seite). Die heu­ti­gen, mo­der­nen Web-Browser kom­men in­zwi­schen al­le oh­ne Probleme mit sol­chen Grafiken zu­recht. Alle? Nicht ganz. Der Microsoft® Internet Explorer in der Version 5.5 bis 6.x be­nö­tigt hier ei­ne ge­son­der­te Handhabung…

Um die­sen Browser da­zu zu be­we­gen, die nor­mier­te Transparenz ei­ner PNG-Datei an­zu­zei­gen, müs­sen ei­ni­ge Kniffe voll­zo­gen wer­den. Der Grundschritt be­steht im Einsatz des Microsoft-Filters AlphaImageLoader. Bei Grafiken, di­rekt im Inhalt ei­ner Seite, kann der Internet Explorer mit fol­gen­dem Konstrukt zur Transparenz über­re­det wer­den (für die­sen Anwendungsbereich gibt es im Web auch un­ter­schied­li­che JavaScript-Programme, wel­che nach­träg­lich al­le IMG-Tags ent­spre­chend er­wei­tern. Bitte be­ach­ten: Wenn mit­tels der Filteranweisung ein Bild ei­nem IMG-Tag hin­zu­ge­fügt wird, dann soll­te die Source auf ein trans­pa­ren­tes GIF zei­gen.):

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

Werden al­ler­dings PNG-Grafiken mit­tels CSS-Definitionen als Hintergrundbilder in HTML-Elemente wie z.B. dem DIV ein­ge­setzt, muss man schon meh­re­re Schritte un­ter­neh­men:

  1. Es muss un­ter­schie­den wer­den, ob ein mo­der­ner Browser oder der Internet Explorer 5.5 – 6.x die Webseite be­sucht.
  2. Für den Internet-Explorer muss der Filter im Cascading Style Sheet (CSS) an­ge­ge­ben wer­den.
  3. Hyperlinks in HTML-Elementen mit PNG-Hintergrund müs­sen ggf. ge­son­dert be­han­delt wer­den.

1. Die Browser-Weiche

Das Ziel die­ser Weiche be­steht in der Ermittlung des Browsers, wel­cher ei­ne Anfrage an den Webserver stellt. Dies ist von Nöten, da wir für den Internet Explorer ei­ne spe­zi­el­le Filterdefinition im CSS (sie­he un­ten) be­nö­ti­gen, die wie­der­um an­de­re Browser nicht ver­ste­hen.

Die PHP-Weiche

Es gibt un­ter­schied­li­che Möglichkeiten das Problem mit der Filterzuordnung zu lö­sen. Eine von mir be­vor­zug­te Lösung be­steht dar­in, un­ter­schied­li­che Style-Sheet-Dateien zu er­stel­len, ei­ne für mo­der­ne Webbrowser und ei­ne für den Internet Explorer 5.5 – 6.x. Diese Dateien kön­nen dann ab­hän­gig vom Browser-Request in die Webseite ein­ge­bun­den wer­den. Der fra­gen­de Browser kann mit­tels PHP er­mit­telt wer­den. Der Aufruf „<?php echo $_SERVER ["HTTP_USER_AGENT"]; ?>“ lie­fert hier bei­spiels­wei­se „Mozilla/4.0 (com­pa­ti­ble; MSIE 5.01; Windows NT 5.0)„. Bedient man sich nun der PHP-Funktion strstr(), kann man fest­stel­len, ob ein be­stimm­ter Teilstring in die­ser Angabe vor­kommt. Uns in­ter­es­siert hier das Vorkommen von „MSIE 5“ und „MSIE 6“ (Der Internet Explorer 7 kommt mit PNG-Grafiken zu­recht, ver­steht al­ler­dings auch die Filter. Theoretisch reicht auch ei­ne Prüfung auf aus­schließ­lich „MSIE„). Eine PHP-Weiche könn­te nun fol­gen­der­ma­ßen aus­se­hen:

<?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 : mo­di­fi­zie­re Hauptstylesheet
                    oder bin­de neu­es ein  */
    </style>
<?php
    } el­se {
?>
    <style type="text/css" media="screen">
        /* mo­der­ne Browser: mo­di­fi­zie­re Hauptstylesheet
                            oder bin­de neu­es ein  */
    </style><?php
    }
?>

Die Kommentar-Weiche in der HTML

Ein wei­te­rer Weg be­steht im Einsatz ei­ner Kommentar-Weiche di­rekt im HTML-Code, wel­che der Internet-Explorer ver­steht. Hier kann so­gar ein Versionsvergleich des Browsers ein­ge­baut wer­den. Das fol­gen­de Beispiel de­fi­niert ei­ne CSS-Anpassung spe­zi­ell für den IE zwi­schen der Version 5.5 und 6.x.

<!--[if lt IE 7]>
<!--[if gte IE 5.500]>
    <style type="text/css">
        /* de­fi­nie­re hier spe­zi­ell für den Internet Explorer */
    </style>
<![en­dif]-->
<![en­dif]-->

Der CSS-Hack

Es ist nicht wirk­lich schön, aber ei­ne wei­te­re Möglichkeit der Unterscheidung be­steht im Ausnutzen der dif­fe­ren­zier­ten Interpretation der CSS-Definitionen. Der Internet Explorer in der Version 5.x-6.x ver­steht die CSS-Schreibweise „html > bo­dy #TagID {}“ nicht. Dafür kommt er als ein­zi­ger mit der Schreibweise „* html #TagID {}“ zu­recht (für ihn ist al­so das HTML-Element nicht das Root-Element). So ist es uns mög­lich, zwei un­ter­schied­li­che CSS-Definitionen für ein und das­sel­be Element in ei­ne CSS-Datei ein­zu­bin­den. Dies geht al­ler­dings nur so­lan­ge gut, wie die Browser ent­spre­chend nicht da­zu ler­nen! (sie­he auch: Webseite von Kristof Lipfert).

2. Microsoft-Filterdefinition im CSS

Für den Internet-Explorer muss der Microsoft-Filter AlphaImageLoader im Style-Sheet an­ge­ge­ben wer­den. Dieser Filter lädt das PNG Bild ein und prä­sen­tiert die­ses mit­samt der Transparenz. Der Parameter sizingMethod='scale' sorgt da­für, dass das Bild ggf. ge­streckt oder in ei­ner Wiederholung dar­ge­stellt wer­den kann.
ACHTUNG: Die Bild-URL in der Filterdefinition darf kei­ne Sonderzeichen, wie z.B. ein Leerzeichen ent­hal­ten, an­sons­ten kann es pas­sie­ren, das sich das PNG-Hintergrundbild des ent­spre­chen­den HTML-Elements (meist DIV) un­ge­wollt an die obe­re Kante des Vorgänger-Elements aus­rich­tet! Auch soll­te hier die URL im­mer kom­plett an­ge­ge­ben wer­den.
Das fol­gen­de Beispiel de­fi­niert für ein HTML-Element ein PNG-Hintergrundbild, wel­ches in den un­ter­schied­li­chen Browsern mit rich­ti­ger Transparenz dar­ge­stellt wird (es wird der CSS-Hack ein­ge­setzt).

#ele­mentID {  		     /* für al­le Browser gül­tig */
        /* PNG im Hintergrund wie­der­ho­len */
        background-repeat: re­peat;
        background-position: cen­ter top;
}
html > bo­dy #ele­mentID {     /* mo­der­ner Browser */
        back­ground: url("./background.png")
}
* html #ele­mentID {          /* Internet Explorer */
        fil­ter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://.../background.png", sizingMethod="scale");
}

3. Herstellen der Link-Funktionalität

HTML-Elemente (z.B. DIV-Tags), wel­che Links um­schlie­ßen und ei­ne PNG-Datei als Hintergrundbild ent­hal­ten, ver­hin­dern im Internet Explorer 5/6 ggf. die kor­rek­te Funktionalität der Hyperlinks. Diese las­sen sich meist nicht mehr an­kli­cken. Hier gibt es ei­nen an sich un­er­klär­li­chen Trick der an­ge­wen­det wer­den muss: die Link-Tags <a> wer­den mit­tels CSS ex­pli­zit re­la­tiv po­si­tio­niert:

*a {po­si­ti­on: re­la­ti­ve;}

Damit dies auch wirk­lich zum er­wünsch­ten Ergebnis führt, dür­fen die Elemente mit PNG-Hintergrund, in de­nen sol­che Links ent­hal­ten sind, NICHT re­la­tiv po­si­tio­niert wer­den!

5

Kommentare

  1. Lotte  Januar 4, 2008

    Vielen Dank für die Information, vor­al­lem die Info für das Herstellen der Link-Funktionalität!! Dies hat mich die letz­ten Tage fer­tig ge­macht, war­um auch im­mer die po­si­tio­nie­rung für die Links auf­ge­ru­fen wer­den muss. IE6 ist Owned 🙂 Besten dank an Matthias Brusdeylins

    antworten

Schreibe einen Kommentar