In dem Blog Beitrag „Webseiten auf Browser-Kompatibilität testen, aber richtig“ habe ich euch gezeigt, wie ihr Webseiten in diversen Browsern testen könnt. Das einzige, dass jetzt noch fehlt, ist das ich euch sage wie ihr Darstellungsfehler in unterschiedlichen Browsern beheben könnt. Wenn wir mal ganz ehrlich sind, dann treten die meisten Fehler eher weniger in den Webkit (Safari, Chrome, usw.) oder Gecko (Firefox) Engine Browsern auf, sondern in den diversen Versionen des Microsoft Internet Explorers.
Gerade für solche Fälle gibt es eine sehr gute Lösung um speziell für den Microsoft Internet Explorer zugeschnittene CSS-Daten zu erstellen. Diese Lösung nennt sich Conditional Comments. Conditional Comments bieten eine relativ einfach zu verwendende Möglichkeit für diverse Versionen des Internet Explorers eine ganz eigene CSS-Datei einzubinden. In Ausgeschriebener Form sind z.B. folgende Möglichkeiten denkbar: Wenn der verwendete Browser älter oder gleich Internet Explorer 7 ist dann soll die Stylesheet Datei ie7.css eingebunden werden.
Der Unterschied zwischen normalen HTML Kommentaren (HTML Comments) und den Conditional Comments:
Auswahl-Werte für if-Anweisung
| Wert | Funktion | Beispiel |
|---|---|---|
| !IE | wenn kein Internet Explorer | <!–[if !IE]> |
| IE | wenn Internet Explorer | <!–[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]> |
| IE 8 | wenn Internet Explorer Version 8 | <!–[if IE 8]> |
| mso | wenn Microsoft Office | <!–[if mso]> |
| mso 9 | wenn Microsoft Office 2000 (Office 2001 auf Mac OS) | <!–[if mso 9]> |
| mso 10 | wenn Microsoft Office 2002 (Office X auf Mac OS) | <!–[if mso 10]> |
| mso 11 | wenn Microsoft Office 2003 (Office 2004 auf Mac OS) | <!–[if mso 11]> |
| mso 12 | wenn Microsoft Office 2007 (Office 2008 auf Mac OS) | <!–[if mso 12]> |
| vml | wenn VML unterstützt wird | <!–[if vml]> |
Operatoren für die if-Anweisung
| Operator | Funktion | Beispiel |
|---|---|---|
| ! | Nicht-Operator | <!–[if !(IE 6)]> (wenn nicht IE 6) |
| lt | Kleiner-als-Operator | <!–[if lt IE 6]> (wenn kleiner als IE 6) |
| lte | Kleiner-gleich-Operator | <!–[if lte IE 6]> (wenn kleiner als oder gleich IE 6) |
| gt | Größer-als-Operator | <!–[if gt IE 6]> (wenn größer IE 6) |
| gte | Größer-gleich-Operator | <!–[if gte IE 6]> (wenn größer als oder gleich IE 6) |
| & | Und-Operator | <!–[if mso & !vml]> (wenn Office-Programm ohne VML-Unterstützung) |
| | | Oder-Operator | <!–[if mso | ie]> (wenn Office-Programm oder IE) |
Kommen wir nun zurück zu unserem Praxis-Beispiel mit der CSS Datei:
Update: In dem Beispiel oben war ein Tippfehler, jetzt stimmt es!
Auf diese Art und Weise wird diese CSS Datei nur dann eingebunden wenn die Seite mit einem IE 7 oder älter geöffnet wird.
Viel Spaß beim ausprobieren…