PNG im IE mit HTC

Mit dem Micro­soft Inter­net Explo­rer 5.0 wur­de ein neu­er, nicht stan­dar­di­sier­ter Mecha­nis­mus zum Ein­bin­den soge­nann­ter HTML-Komponenten (HTC) ein­ge­führt. Da die­se HTCs aus­schließ­lich vom Inter­net Explo­rer ver­stan­den wer­den, folgt hier eine wei­te­re Mög­lich­keit brow­ser­ab­hän­gi­ge Fähig­kei­ten ein­zu­bau­en. Hier wird eine Erwei­te­rung zum Arti­kel “PNG im Inter­net Explo­rer” beschrie­ben. Es emp­fiehlt sich, die­sen vor­her zu lesen.

Die Abkür­zung HTC steht für HTML Com­po­nent. Durch sol­che Kom­po­nen­ten kann man das Ver­hal­ten bestimm­ter HTML-Elemente defi­nie­ren und sau­ber aus­la­gern. Dazu wer­den Pro­gramm­ab­läu­fe in JScript bzw. VBScript aus­ge­wähl­ten Ereig­nis­sen bestimm­ter Ele­men­te zuge­ord­net. Ein­ge­bun­den wer­den die­se Kom­po­nen­ten mit­tels dem nicht Stan­dard­kon­for­men CSS-Attribut behavior: url(datei.htc). Da dies nur der Inter­net Explo­rer ver­steht, wird auf die­sem Weg Code ein­ge­bun­den, der aus­schließ­lich für die­sen Brow­ser gül­tig ist. So zum Bei­spiel auch ein Script, das den Microsoft-PNG-Filter den ein­zel­nen Gra­fik­ele­men­ten einer Sei­te auto­ma­tisch zuord­net.
Dies macht das “IE PNG Fix”, wel­ches auf Twin­He­lix vor­ge­stellt wird und für den Inter­net Explo­rer ab der Ver­si­on 5.5 ein­ge­setzt wer­den kann. Hier­bei han­delt es sich um die glei­che tech­ni­sche Grund­la­ge, die im Arti­kel “PNG im Inter­net Explo­rer” beschrie­ben wird. Nur wer­den die­se CSS-Informationen auto­ma­tisch mit­tels eines HTCs den ein­zel­nen Ele­men­ten zuge­ord­net. Man muss sich somit in der Gestal­tung der Style-Sheet-Dateien dies­be­züg­lich kei­ne geson­der­ten Über­le­gun­gen machen.
Wie oben schon ange­spro­chen han­delt es sich bei dem CSS-Attribut behavior um kein Stan­dard­kon­for­mes Attri­but, was dazu führt, dass eine CSS-Validierung fehl­schlägt. Man kann aller­dings sol­che Über­prü­fun­gen ggf. aus­trick­sen, indem man das HTC mit­tels eines Java­Scripts ein­bin­det. Der Code hier­für wird im mit­ge­lie­fer­ten Bei­spiel in den Sourcen dar­ge­stellt und ist hier noch­mals auf­ge­lis­tet:

<script type="text/javascript">
    if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule)
    {
        // Feel free to add rules for specific tags only, you just have to call it several times.
        document.styleSheets[0].addRule('*', 'behavior: url(iepngfix.htc)');
    }
</script>
0

Schreibe einen Kommentar