00 Stimmen

CSS Hacks für den Internet Explorer

Tipp von NetGuy | 15.06.2012 um 18:51

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.

AntwortenPositivNegativ
00 Stimmen

Ich möchte mehrere Dinge zu diesem Tipp anmerken. Zunächst sind diese Hacks ja schön und gut, anwenden würde ich sie in der Praxis aber nicht.

Stattdessen würde ich lieber zu Conditional Comments plädieren, die man zum Beispiel so anwenden kann:

<!--[if IE]>
Es ist ein Internet Explorer!
<![endif]-->

<!--[if IE 6]>
Es ist ein Internet Explorer Version 6!
<![endif]-->

<!--[if gt IE 6]>
Es ist ein Internet Explorer höher als Version 6!
<![endif]-->

Zweitens sprichst du hier von Browsern, die eigentlich sowieso keiner mehr verwendet. Selbst YouTube unterstützt Version 6 des Internet Explorers 6 nicht. Wieso sollte man sich da die Mühe machen Extracode für Versionen 5.0 und 5.5 anzulegen, die heute niemand mehr benutzt?

Und drittens solltest du noch erwähnen, dass sich der Internet Explorer für Mac etwas anders Verhält. So wird dieser Browser in den Beispielen von oben immer die Farbe aus der ersten Zeile übernehmen und nicht die durch den Hack zugewiesenen.
18.06.2012 um 02:11

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarDer Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen

 

Ähnliche Themen

CSS Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.