Trans­pa­ren­te PNG-Grafiken ermög­li­chen die Gestal­tung von schö­nen und effekt­vol­len Web­sei­ten. Sie kön­nen den Hin­ter­grund durch­schim­mern las­sen und haben nicht den von GIF-Grafiken bekann­ten ver­franz­ten Rand (sie­he z.B. die BcxP-Clan-Seite). Die heu­ti­gen, moder­nen Web-Browser kom­men inzwi­schen alle ohne Pro­ble­me mit sol­chen Gra­fi­ken zurecht. Alle? Nicht ganz. Der Micro­soft® Inter­net Explo­rer in der Ver­si­on 5.5 bis 6.x benö­tigt hier eine geson­der­te Handhabung…

Um die­sen Brow­ser dazu zu bewe­gen, die nor­mier­te Trans­pa­renz einer PNG-Datei anzu­zei­gen, müs­sen eini­ge Knif­fe voll­zo­gen wer­den. Der Grund­schritt besteht im Ein­satz des Microsoft-Filters AlphaI­ma­geL­oa­der. Bei Gra­fi­ken, direkt im Inhalt einer Sei­te, kann der Inter­net Explo­rer mit fol­gen­dem Kon­strukt zur Trans­pa­renz über­re­det wer­den (für die­sen Anwen­dungs­be­reich gibt es im Web auch unter­schied­li­che JavaScript-Programme, wel­che nach­träg­lich alle IMG-Tags ent­spre­chend erwei­tern. Bit­te beach­ten: Wenn mit­tels der Fil­ter­an­wei­sung ein Bild einem IMG-Tag hin­zu­ge­fügt wird, dann soll­te die Source auf ein trans­pa­ren­tes GIF zeigen.):

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

Wer­den aller­dings PNG-Grafiken mit­tels CSS-Definitionen als Hin­ter­grund­bil­der in HTML-Elemente wie z.B. dem DIV ein­ge­setzt, muss man schon meh­re­re Schrit­te unternehmen:

1. Es muss unter­schie­den wer­den, ob ein moder­ner Brow­ser oder der Inter­net Explo­rer 5.5 — 6.x die Web­sei­te besucht.
2. Für den Internet-Explorer muss der Fil­ter im Cas­ca­ding Style Sheet (CSS) ange­ge­ben werden.
3. Hyper­links in HTML-Elementen mit PNG-Hintergrund müs­sen ggf. geson­dert behan­delt werden.

1. Die Browser-Weiche

Das Ziel die­ser Wei­che besteht in der Ermitt­lung des Brow­sers, wel­cher eine Anfra­ge an den Web­ser­ver stellt. Dies ist von Nöten, da wir für den Inter­net Explo­rer eine spe­zi­el­le Fil­ter­de­fi­ni­ti­on im CSS (sie­he unten) benö­ti­gen, die wie­der­um ande­re Brow­ser nicht verstehen.

Die PHP-Weiche

Es gibt unter­schied­li­che Mög­lich­kei­ten das Pro­blem mit der Fil­ter­zu­ord­nung zu lösen. Eine von mir bevor­zug­te Lösung besteht dar­in, unter­schied­li­che Style-Sheet-Dateien zu erstel­len, eine für moder­ne Web­brow­ser und eine für den Inter­net Explo­rer 5.5 — 6.x. Die­se Datei­en kön­nen dann abhän­gig vom Browser-Request in die Web­sei­te ein­ge­bun­den wer­den. Der fra­gen­de Brow­ser kann mit­tels PHP ermit­telt wer­den. Der Auf­ruf “<?php echo $_SERVER ["HTTP_USER_AGENT"]; ?>” lie­fert hier bei­spiels­wei­se “Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)”. Bedient man sich nun der PHP-Funktion strstr(), kann man fest­stel­len, ob ein bestimm­ter Teil­st­ring in die­ser Anga­be vor­kommt. Uns inter­es­siert hier das Vor­kom­men von “MSIE 5″ und “MSIE 6″ (Der Inter­net Explo­rer 7 kommt mit PNG-Grafiken zurecht, ver­steht aller­dings auch die Fil­ter. Theo­re­tisch reicht auch eine Prü­fung auf aus­schließ­lich “MSIE”). Eine PHP-Weiche könn­te nun fol­gen­der­ma­ß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 wei­te­rer Weg besteht im Ein­satz einer Kommentar-Weiche direkt im HTML-Code, wel­che der Internet-Explorer ver­steht. Hier kann sogar ein Ver­si­ons­ver­gleich des Brow­sers ein­ge­baut wer­den. Das fol­gen­de Bei­spiel defi­niert eine CSS-Anpassung spe­zi­ell für den IE zwi­schen der Ver­si­on 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 wirk­lich schön, aber eine wei­te­re Mög­lich­keit der Unter­schei­dung besteht im Aus­nut­zen der dif­fe­ren­zier­ten Inter­pre­ta­ti­on der CSS-Definitionen. Der Inter­net Explo­rer in der Ver­si­on 5.x‑6.x ver­steht die CSS-Schreibweise “html > body #TagID {}” nicht. Dafür kommt er als ein­zi­ger mit der Schreib­wei­se “* html #TagID {}” zurecht (für ihn ist also das HTML-Element nicht das Root-Element). So ist es uns mög­lich, zwei unter­schied­li­che CSS-Definitionen für ein und das­sel­be Ele­ment in eine CSS-Datei ein­zu­bin­den. Dies geht aller­dings nur solan­ge gut, wie die Brow­ser ent­spre­chend nicht dazu ler­nen! (sie­he auch: Web­sei­te von Kris­tof Lip­fert).

2. Microsoft-Filterdefinition im CSS

Für den Internet-Explorer muss der Microsoft-Filter AlphaI­ma­geL­oa­der im Style-Sheet ange­ge­ben wer­den. Die­ser Fil­ter lädt das PNG Bild ein und prä­sen­tiert die­ses mit­samt der Trans­pa­renz. Der Para­me­ter sizingMethod='scale' sorgt dafür, dass das Bild ggf. gestreckt oder in einer Wie­der­ho­lung dar­ge­stellt wer­den kann.
ACHTUNG: Die Bild-URL in der Fil­ter­de­fi­ni­ti­on darf kei­ne Son­der­zei­chen, wie z.B. ein Leer­zei­chen ent­hal­ten, ansons­ten kann es pas­sie­ren, das sich das PNG-Hintergrundbild des ent­spre­chen­den HTML-Elements (meist DIV) unge­wollt an die obe­re Kan­te des Vorgänger-Elements aus­rich­tet! Auch soll­te hier die URL immer kom­plett ange­ge­ben werden.
Das fol­gen­de Bei­spiel defi­niert für ein HTML-Element ein PNG-Hintergrundbild, wel­ches in den unter­schied­li­chen Brow­sern mit rich­ti­ger Trans­pa­renz dar­ge­stellt 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), wel­che Links umschlie­ßen und eine PNG-Datei als Hin­ter­grund­bild ent­hal­ten, ver­hin­dern im Inter­net Explo­rer ⁵⁄₆ ggf. die kor­rek­te Funk­tio­na­li­tät der Hyper­links. Die­se las­sen sich meist nicht mehr ankli­cken. Hier gibt es einen an sich uner­klär­li­chen Trick der ange­wen­det wer­den muss: die Link-Tags <a> wer­den mit­tels CSS expli­zit rela­tiv positioniert:

*a {position: relative;}

Damit dies auch wirk­lich zum erwünsch­ten Ergeb­nis führt, dür­fen die Ele­men­te mit PNG-Hintergrund, in denen sol­che Links ent­hal­ten sind, NICHT rela­tiv posi­tio­niert werden!