Themen
 
Individuelles Webdesign
 
06.03.2007 16:17

Browserweichen und Hacks für den IE

Kategorie: Browser, HTML/CSS
Von: Andreas Prucha
HTML- und CSS-Hacks für den Internet-Explorer sind weit verbreitet und viele Web-Pages beschreiben sie. Leider werden dabei oft die grundlegenden Informationen wie der Hack funktioniert nicht mitbeschrieben.

Fast jeder Webdesigner oder Entwickler kommt früher oder später in die Verlegenheit einen Hack oder Workaround für den Internet-Explorer verwenden zu müssen, da der IE die Seite nicht richtig darstellt. Alle möglichen Hacks- und Workarounds sind im Internet beschrieben, doch leider fehlen oft die grundlegenden Informationen wie dieser Hack funktioniert. Dabei können diese Informationen wichtig sein, um den Hack auch auf andere Probleme umzulegen.

Grundsätzlich funktionieren die Hacks meistens nach einem bestimmten Schema: Man nützt eine Schwäche oder Bug des Internet Explorers aus, um eine andere Schwäche oder Bug zu umgehen. Klingt pervers, ist es auch

Grundätzlich sollte auf Hacks so weit wie möglich verzichtet werden,  da sie immer einen Missbrauch von HTML/CSS darstellen und nie sicher gestellt ist, dass der Hack noch in der nächsten Version von IE den gewünschten Effekt erzielt

Nur manchmal lassen sich Hacks nun mal nicht vermeiden. Besondere Kundenwünsche können Webdesigner dazu zwingen Deklarationen verwenden zu müssen, die im IE nun mal ohne Hack nicht richtig funktionieren.

Conditionals in HTML

Die verwendung von Conditionals in HTML stellt an sich eigentlich keine Hack dar und ist sicher die sauberste Variante um für den Internet Explorer zusätzliche oder andere CSS-Deklarationen zu verwenden.

Beispiel-HTML-Header:<link rel="stylesheet" type="text/css" href="allgemein.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="nur-ie.css" />
<![endif]-->

Diese Art von Browserweiche nützt keinen IE-Bug aus und ist daher eine der Zukunftssicheren. Trotzdem ist anzumerken, dass sie nicht HTML-Standard sind.

Die Browserweiche ist relativ flexibel und bietet auch Operatoren und die Abfrage bestimmter Versionen des IE:

Operator

Erläuterung / Beispiel

!

Nicht-Operator.
<!--[if !IE]> Wenn nicht Internt Explorer <![endif]-->

lt

Kleiner-als-Operator.
<!--[if lt IE 6]> Wenn Internet Explorer kleiner Version 6 verwendet wird <![endif]-->

lte

Kleiner-Gleich-Operator.
<!--[if lte IE 5.5]> Wenn Internet Explorer kleiner oder gleich Version 5.5 verwendet wird <![endif]-->

gt

Größer-als-Operator.
<!--[if gt IE 5]> Wenn Internet Explorer grösser Version 5 verwendet wird <![endif]-->

gte

Grösser-Gleich-Operator.
<!--[if gte IE 6]> Wenn Internet Explorer 6 oder neuer verwendet wird<![endif]-->

Bekannte Werte für den Vergleich sind

 

Wert

Version

IE

Alle Internet Explorer Versionen

IE 5

Internet Explorer 5

IE 5.5

Internet Explorer 5.5

IE 6

Internet Explorer 6

IE 7

Internet Explorer 7

Javascript-Bugfixes für den IE

Im Internet finden sich mittlerweile einige interessante Javascript-Libraries die versuchen Probleme des IE zu umgehen.

Besonders bemerkenswert und umfangreich ist Dean Edwards Projekt IE7 {css2: auto}

Dieses Projekt hat nicht direkt etwas mit dem Internet Explorer 7 zu tun. Im Gegenteil. Das Projekt stammt aus dem Jahre 2004 und versuchte damals schon die gröbsten CSS-Probleme des Internet Explorers zu umgehen. Ein äusserst interessantes Projekt, aber leider noch in der Alpha-Version.

Der * html Hack

Mit dem * html Hack lassen sich bedingte Deklarationen für den Internet Explorer erzielen.

Verschachtelte CSS-Deklarationen werden immer von aussen nach innen interpretiert.  So besagt beispielsweise die Deklaration  a.mein-absatz  code {....},  dass die angegebene Formatierung für in code-tags eingeschlossene Bereiche nur dann verwendet werden soll, wenn sie sich innerhalb eines Absatzes mit der Klasse mein-absatz befindet.

Im Internet-Explorer 7 gibt es mit diesem Hack im strict-modus Probleme. Daher ist die Verwendung nicht unbedingt empfehlenswert.

* html bedeutet also, dass sich das html-element in "irgendwas" befinden muss. Nun ist es aber so, dass alle Browser ausser dem Internet-Explorer html als das Root-Element betrachten. Das ist logisch, weil <html> nicht in andere Tags eingeschlossen wird, und daher * html eigentlich unsinnig ist.

Typischer HTML-Code:

<html>
  <head>
    ....
  </head>
  <body>
    ....
  </body>
</html>

Ausserhalb von html ist nichts mehr. * html ist also eigentlich eine unsinnige, aber trotzdem syntaktisch valide Deklaration. Der Hack nützt aus, dass der Internet Explorer im Gegensatz zu allen anderen Browsern diese unsinnige Deklaration interpretiert.

Das Risiko ist also, dass IE auch

Daruch lassen sich allgemeine Deklarationen so überschreiben, dass sie nur vom IE interpretiert werden:

Test-HTML-Code:<html>
<head>

  <style type="text/css">

    /* Die allgemeine Deklaration */

    .mein-test {
      font-weight: bold;
    }

    /* und hier nur für den IE */


    * html .mein-test {
      font-weight: normal;
    }


  </style>

</head>
<body>
  <p>Ich teste hier wie <span class="mein-test">die Klasse mein-test</span> dargestellt wird.<p>
</body>
</html>

Auf allen Browsern ausser dem IE wird

Ich teste hier wie die Klasse mein-test dargestellt wird.

angezeigt wird. Nur beim IE erscheint

Ich teste hier wie die Klasse mein-test dargestellt wird.

Was für diesen Test genau der gewünschte Effekt ist.

 

Fazit

Auf Browswerweichen und Hacks kann derzeit leider nur selten verzichtet werden. Design-Ansprüche von Kunden zwingen Web-Designer dazu auch CSS zu verwenden, das vom Internet Explorer ohne Hack und Workaround nicht richtig dargestellt wird, was leider immer wieder zu Mehraufwand und Mehrkosten bei Web-Projekten führt. Hacks die ihrerseits wieder Bugs des IE ausnützen sollten dabei aber weitgehend vermieden werden, da nie auszuschliessen ist, dass Microsoft genau den ausgenützten Bug in zukünfigten Versionen beheben wird. Der Einsatz von Browserweichen auf basis von Conditionals in HTML stellt derzeit die sicherste Methode dar um spezielle Deklarationen für den IE zu verwenden.

 



Kommentare


Kommentar schreiben...


Keine Einträge

Keine Einträge im Gästebuch gefunden.

Kommentar schreiben