HTML: Conditional Comments
Jeder, der schon einmal eine Website in HTML oder CSS gebaut hat, kennt sicherlich die Probleme, die es mit den Internet Explorern gibt. Alles sieht irgendwie anders aus. Wie ihr dieses Problem umgehen könnte, zeige ich euch hier.
Um dem Internet Explorer beizubringen, wie die Seite „in richtig“ aussieht, gibt es mehrere Möglichkeiten. Ich werde hier zwei Möglichkeiten ansprechen.
1. Möglichkeit: Mehrere CSS Dateien
Bis vor wenigen Monaten habe ich immer diese Möglichkeit benutzt. Hier schreibt man in den Head der HTML Dateien folgendes:
[html]
<!–[if lt IE 9]><link rel="stylesheet" type="text/css" href="/css/ie8.css"><![endif]–>
<!–[if lt IE 8]><link rel="stylesheet" type="text/css" href="/css/ie7.css"><![endif]–>
<!–[if lt IE 7]><link rel="stylesheet" type="text/css" href="/css/ie6.css"><![endif]–>
[/html]
Das if lt IE 9 bedeutet so viel wie: Wenn kleiner als Internet Explorer 9. Die ganze Zeile bedeutet also: Wenn man mit einem IE8/IE7/IE6 auf die Seite surft, dann binde die ie8.css Datei ein.
In dieser könnt ihr nun wie gewohnt euer CSS schreiben. Dieses wird sich dann nur auf den Internet Explorer 8 und tiefer auswirken.
2. Möglichkeit: Alles in einer Datei
Die zweite Möglichkeit sieht so aus:
[html]
<!–[if IE 6 ]> <html lang="DE-de" id="ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="DE-de" id="ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="DE-de" id="ie8"> <![endif]–>
[/html]
Diese Conditional Comments schreibt ihr direkt nach dem öffnenden html-Tag. In diesem Fall wird, wenn die Seite z.B. mit dem IE8 angesurft wird, an das html-Tag direkt die ID „ie8“ angehängt.
So könnt ihr nun eure Internet Explorer Reparaturen direkt in eurer CSS Datei vornehmen, indem ihr alles über die ID ändert. Dadurch könnt ihr HTTP-Requests sparen, wodurch eure Seite wieder ein kleines bisschen schneller wird.
In dem Wikipedia Artikel zu Conditional Comments, kann man sich auch noch andere Operatoren oder Beispiele ansehen.
- Pingback: IE7 display: inline-block CSS Bug