PNG im Internet Explorer

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 Hand­ha­bung…

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 zei­gen.):

<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 unter­neh­men:

  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 wer­den.
  3. Hyper­links in HTML‐Elementen mit PNG‐Hintergrund müs­sen ggf. geson­dert behan­delt wer­den.

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 ver­ste­hen.

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­string 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 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 : 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 wer­den.
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 ein­ge­setzt).

#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 56 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 posi­tio­niert:

*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 wer­den!

5

Kommentare

  1. Lotte  Januar 4, 2008

    Vie­len Dank für die Infor­ma­ti­on, vor­al­lem die Info für das Her­stel­len der Link‐Funktionalität!! Dies hat mich die letz­ten Tage fer­tig gemacht, war­um auch immer die posi­tio­nie­rung für die Links auf­ge­ru­fen wer­den muss. IE6 ist Owned 🙂 Bes­ten dank an Mat­thi­as Brusdey­lins

    antworten

Lassen Sie eine Antwort, um Lotte
Klicken Sie hier, um die Antwort abzubrechen


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.