Conditional Comments: Browserweichen für den Internet Explorer
Im zweiten Teil der Reihe Browserweichen & CSS-Hacks erfahren wir, wie sich verschiedene Versionen des Internet Explorer mit Conditional Comments besonders einfach erkennen und unterscheiden lassen.
Pro Conditional Comments
Conditional Comments (nicht Conditional Statements!) ermöglichen das Anzeigen und Verstecken ganzer Abschnitte des HTML-Codes. Eine versionsabhängige Steuerung dieser Art ist sonst nur durch client- oder serverseitige Programmierung möglich.
Contra Conditional Comments
Da es sich um eine proprietäre Technologie von Microsoft handelt, werden Conditional Comments nur vom Internet Explorer (ab Version 5) verstanden. Andere Browser behandeln die Angaben wie normale HTML-Kommentare. Für die meisten IE-Sonderbehandlungen reicht dieses Verhalten aber aus.
Conditional Comments und CSS
Als besonders praktisch erweisen sich Conditional Comments, um Fehler zu bereinigen, die durch nicht standardkonformes Verhalten des Internet Explorers entstehen. Die üblichen CSS-Probleme lassen sich beheben ohne auf kompliziertere CSS-Hacks zurückgreifen zu müssen.
Weil Conditional Comments nicht deaktiviert werden können (wie z.B. JavaScript), gelten sie außerdem als eine sehr sichere Methode der Browserunterscheidung.
Ein kleiner Nachteil: Conditional Comments sind HTML und können daher nicht in CSS-Dateien verwendet werden. Eine wirklich saubere Trennung von HTML-Markup und CSS-Formatierung ist dadurch nicht möglich.
Browserweiche mit Conditional Comments
Ein einfaches Beispiel:
Beispiel eines HTML-Headers mit Browserunterscheidung:
Syntax: mögliche Werte
| Wert | Funktion | Beispiel |
|---|---|---|
| IE | wenn Internet Explorer (ab IE5) | <!–[if IE]> |
| IE 5 | wenn Internet Explorer Version 5.x | <!–[if IE 5]> |
| IE 5.0 | wenn Internet Explorer Version 5.0 | <!–[if IE 5.0]> |
| IE 5.5 | wenn Internet Explorer Version 5.5 | <!–[if IE 5.5]> |
| IE 6 | wenn Internet Explorer Version 6 | <!–[if IE 6]> |
| IE 7 | wenn Internet Explorer Version 7 | <!–[if IE 7]> |
Syntax: Operatoren
| Operator | Funktion | Beispiel |
|---|---|---|
| ! | Nicht | <!–[if !IE 6]> (wenn nicht IE 6) |
| lt | Kleiner-als | <!–[if lt IE 6]> (wenn kleiner als IE 6) |
| lte | Kleiner-gleich | <!–[if lte IE 6]> (wenn kleiner als oder gleich IE 6) |
| gt | Größer-als | <!–[if gt IE 6]> (wenn größer IE 6) |
| gte | Größer-gleich | <!–[if gte IE 6]> (wenn größer als oder gleich IE 6) |
Links & Ressourcen
Zur Übersicht der Reihe “Browserweichen & CSS-Hacks” >>
Weitere Beiträge, die dich interessieren könnten:
[…] Conditional Comments […]