Mit dem Microsoft Internet Explorer 5.0 wurde ein neuer, nicht standardisierter Mechanismus zum Einbinden sogenannter HTML-Komponenten (HTC) eingeführt. Da diese HTCs ausschließlich vom Internet Explorer verstanden werden, folgt hier eine weitere Möglichkeit browserabhängige Fähigkeiten einzubauen. Hier wird eine Erweiterung zum Artikel “PNG im Internet Explorer” beschrieben. Es empfiehlt sich, diesen vorher zu lesen.
Die Abkürzung HTC steht für HTML Component. Durch solche Komponenten kann man das Verhalten bestimmter HTML-Elemente definieren und sauber auslagern. Dazu werden Programmabläufe in JScript bzw. VBScript ausgewählten Ereignissen bestimmter Elemente zugeordnet. Eingebunden werden diese Komponenten mittels dem nicht Standardkonformen CSS-Attribut behavior: url(datei.htc)
. Da dies nur der Internet Explorer versteht, wird auf diesem Weg Code eingebunden, der ausschließlich für diesen Browser gültig ist. So zum Beispiel auch ein Script, das den Microsoft-PNG-Filter den einzelnen Grafikelementen einer Seite automatisch zuordnet.
Dies macht das “IE PNG Fix”, welches auf TwinHelix vorgestellt wird und für den Internet Explorer ab der Version 5.5 eingesetzt werden kann. Hierbei handelt es sich um die gleiche technische Grundlage, die im Artikel “PNG im Internet Explorer” beschrieben wird. Nur werden diese CSS-Informationen automatisch mittels eines HTCs den einzelnen Elementen zugeordnet. Man muss sich somit in der Gestaltung der Style-Sheet-Dateien diesbezüglich keine gesonderten Überlegungen machen.
Wie oben schon angesprochen handelt es sich bei dem CSS-Attribut behavior
um kein Standardkonformes Attribut, was dazu führt, dass eine CSS-Validierung fehlschlägt. Man kann allerdings solche Überprüfungen ggf. austricksen, indem man das HTC mittels eines JavaScripts einbindet. Der Code hierfür wird im mitgelieferten Beispiel in den Sourcen dargestellt und ist hier nochmals aufgelistet:
<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>
SEP