CSS Hacks für den Internet Explorer

In diesem Tipp möchte ich euch die CSS Hacks für den Internet Explorer vorstellen, mit denen sich für verschiedene Versionen des Internet Explorers unterschiedliche CSS-Regeln definieren lassen. Dazu gleich das erste Beispiel:

Regeln für IE 7, IE 6 und tiefer, andere Browser

p {
  color: #F00;   /* Alle Browser */
  *color: #0F0;  /* IE 7 und tiefer */
  _color: #00F;  /* IE 6 und tiefer */
}

Diese CSS-Regeln für einen Absatz p, definieren eine Schriftfarbe ausschließlich für den Internet Explorer 7, eine Farbe für den Internet Explorer 6 und tiefer Versionen des Internet Explorers und eine weitere Farbe für alle anderen Browser einschließlich des Internet Explorers 8.

Das Prinzip ist folgendes: Die Interpretation beginnt bei "color: #F00", was alle Browser verstehen. Die zweite Zeile verstehen nur noch IE7, IE6 und tiefer, weswegen für diese Browser die Farbe aus der zweiten Zeile gesetzt wird. Die dritte Zeile wird von IE7 nicht mehr verstanden, aber von IE6 und allen tieferen Versionen, weswegen wir so drei Farben für die verschiedenen Versionen definieren konnten.

Regeln für IE 7, IE 6, unter IE 6, andere Browser

p {
  color: #F00;   /* Alle Browser */
  *color: #0F0;  /* IE 7 und tiefer */
  _color: #00F;  /* IE 6 und tiefer */
  _co\lor; #FF0; /* Nur IE 6 */
}

Erweitern wir unseren Hack so, bekommen wir die Möglichkeit, nur den Internet Explorer 6 ansprechen. Die Zeile "IE6 und tiefer" bezieht sich dann nur noch auf Versionen unter der Version 6, da nur in der Version 6 die vierte Zeile alle anderen überschreibt.

Regeln für IE 7, IE 6, IE 5.5, IE 5.0, andere Browser

p {
  color: #F00;          /* Alle Browser */
  *color: #0F0;         /* IE 7 und tiefer */
  _color/**/: #00F;     /* Nur IE 5.0 */
  _color:/**/ #FF0;     /* Nur IE 5.5 */
  _color/**/:/**/ #0FF; /* Nur IE 6 */
}

Im nächsten Schritt wollen wir verschiedene Farben für die Versionen 7, 6, 5.5 und 5 des Internet Explorers sowie eine Farbe für alle anderen Browser. Das Beispiel oben zeigt, wie es geht.

In den Beispielen haben wir stets die Farbe eines Absatzes für verschiedene Browser unterschiedlich angezeigt. Natürlich kommt so etwas in der Praxis seltener vor, in der Regel geht es eher darum, Fehler in den entsprechenden Browser auszugleichen. Die Beispiele sollen nur die Hacks verdeutlichen, die man natürlich auch mit allen anderen CSS-Eigenschaften verwenden kann.