Blog, HTML / CSS

Conditional Comments verwenden

WordPress Entwickler und Webdesigner

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.

Anzeige:




Der Unterschied zwischen normalen HTML Kommentaren (HTML Comments) und den Conditional Comments:

<!-- HTML Kommentar  -->
<!--[if Bedingung]> Conditional Comment <![endif]-->

Auswahl-Werte für if-Anweisung

WertFunktionBeispiel
!IEwenn kein Internet Explorer<!–[if !IE]>
IEwenn Internet Explorer<!–[if IE]>
IE 5wenn Internet Explorer Version 5.x<!–[if IE 5]>
IE 5.0wenn Internet Explorer Version 5.0<!–[if IE 5.0]>
IE 5.5wenn Internet Explorer Version 5.5<!–[if IE 5.5]>
IE 6wenn Internet Explorer Version 6<!–[if IE 6]>
IE 7wenn Internet Explorer Version 7<!–[if IE 7]>
IE 8wenn Internet Explorer Version 8<!–[if IE 8]>
msowenn Microsoft Office<!–[if mso]>
mso 9wenn Microsoft Office 2000 (Office 2001 auf Mac OS)<!–[if mso 9]>
mso 10wenn Microsoft Office 2002 (Office X auf Mac OS)<!–[if mso 10]>
mso 11wenn Microsoft Office 2003 (Office 2004 auf Mac OS)<!–[if mso 11]>
mso 12wenn Microsoft Office 2007 (Office 2008 auf Mac OS)<!–[if mso 12]>
vmlwenn VML unterstützt wird<!–[if vml]>

 

Operatoren für die if-Anweisung

OperatorFunktionBeispiel
!Nicht-Operator<!–[if !(IE 6)]> (wenn nicht IE 6)
ltKleiner-als-Operator<!–[if lt IE 6]> (wenn kleiner als IE 6)
lteKleiner-gleich-Operator<!–[if lte IE 6]> (wenn kleiner als oder gleich IE 6)
gtGrößer-als-Operator<!–[if gt IE 6]> (wenn größer IE 6)
gteGröß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:

<head>
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" media="screen" /> <![endif]-->
</head>

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…

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Eine Antwort zu “Conditional Comments verwenden”

  1. ein wirklich guter artikel. endlich mal habe ich alle tags im überblick ohne ewig auf der seite scrollen zu müssen wenn ich mal wieder auf der suche nach nem conditional comment bin um dem ie6 oder 7 manieren beizubringen. und endlich geht mal auch jemand auf die operatoren für die if anweisungen ein. weiter so… wenn ich irgendwann mal n feedreader einrichte seid ihr die die ersten die ich lesen werde ,)

    grüße aus berlin

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.