PNG im IE mit HTC

Mit dem Microsoft Internet Explorer 5.0 wur­de ein neu­er, nicht stan­dar­di­sier­ter Mechanismus zum Einbinden so­ge­nann­ter HTML-Komponenten (HTC) ein­ge­führt. Da die­se HTCs aus­schließ­lich vom Internet Explorer ver­stan­den wer­den, folgt hier ei­ne wei­te­re Möglichkeit brow­ser­ab­hän­gi­ge Fähigkeiten ein­zu­bau­en. Hier wird ei­ne Erweiterung zum Artikel „PNG im Internet Explorer“ be­schrie­ben. Es emp­fiehlt sich, die­sen vor­her zu le­sen.

Die Abkürzung HTC steht für HTML Component. Durch sol­che Komponenten kann man das Verhalten be­stimm­ter HTML-Elemente de­fi­nie­ren und sau­ber aus­la­gern. Dazu wer­den Programmabläufe in JScript bzw. VBScript aus­ge­wähl­ten Ereignissen be­stimm­ter Elemente zu­ge­ord­net. Eingebunden wer­den die­se Komponenten mit­tels dem nicht Standardkonformen CSS-Attribut be­ha­vi­or: url(datei.htc). Da dies nur der Internet Explorer ver­steht, wird auf die­sem Weg Code ein­ge­bun­den, der aus­schließ­lich für die­sen Browser gül­tig ist. So zum Beispiel auch ein Script, das den Microsoft-PNG-Filter den ein­zel­nen Grafikelementen ei­ner Seite au­to­ma­tisch zu­ord­net.
Dies macht das „IE PNG Fix„, wel­ches auf TwinHelix vor­ge­stellt wird und für den Internet Explorer ab der Version 5.5 ein­ge­setzt wer­den kann. Hierbei han­delt es sich um die glei­che tech­ni­sche Grundlage, die im Artikel „PNG im Internet Explorer“ be­schrie­ben wird. Nur wer­den die­se CSS-Informationen au­to­ma­tisch mit­tels ei­nes HTCs den ein­zel­nen Elementen zu­ge­ord­net. Man muss sich so­mit in der Gestaltung der Style-Sheet-Dateien dies­be­züg­lich kei­ne ge­son­der­ten Überlegungen ma­chen.
Wie oben schon an­ge­spro­chen han­delt es sich bei dem CSS-Attribut be­ha­vi­or um kein Standardkonformes Attribut, was da­zu führt, dass ei­ne CSS-Validierung fehl­schlägt. Man kann al­ler­dings sol­che Überprüfungen ggf. aus­trick­sen, in­dem man das HTC mit­tels ei­nes JavaScripts ein­bin­det. Der Code hier­für wird im mit­ge­lie­fer­ten Beispiel 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 ru­les for spe­ci­fic tags on­ly, you just have to call it several times.
        document.styleSheets[0].addRule('*', 'be­ha­vi­or: url(iepngfix.htc)');
    }
</script>
0

Schreibe einen Kommentar