WMP Webstandards

Conditional Comments

zurück zur Übersicht

Nach oben

Übersicht:

Nach oben

Was sind "Conditional Comments"?

Conditional Comments (kurz: CC) sind spezielle Kommentare, die nur vom Microsoft Internet Explorer ab Version 5 interpretiert werden, um ausschließlich diese Browser mit Anweisungen zu versorgen.

Nach oben

Wie notiert man den CC?

Man kann den CC entweder irgendwo im <body> hinschreiben oder ihm wie üblich im <head> plazieren.

Ein Beispielcode:

<!--[if IE]>
<p>Dieser Absatz wird nur im Internet Explorer angezeigt</p>
<![endif]--> Nach oben

Wie funktioniert der CC

Der CC kann nur im HTML-Dokument notiert werden, aber nicht in CSS-Dateien.
Häufig taucht er im <head> eines HTML-Dokumentes auf, um CSS-Formatierungen per <style>-Element vorzunehmen, da bekanntermaßen der Internet Explorer CSS nur mangelhaft darstellen kann. Hier wird ausgenutzt, dass der CC in Kommentarform (<!-- -->) notiert und folglich von allen anderen Browsern ignoriert wird.
Weiterhin wird die Eigenschaft des IE ausgenutzt, den ersten Wert bei doppelten CSS Angaben mit denen des zweiten zu überschreiben.
Damit nur der IE den CC von der gewöhnlichen Kommentar-Syntax unterscheiden kann, wird ihr noch eine Art if-Abfrage hinzugefügt, zum Beispiel <!--[if IE]>.

Nach oben

Variationen der "if-Abfrage"

Besonders hilfreich werden CCs durch die Möglichkeit bestimmte IE-Versionen anzusprechen oder gezielt auszuschließen. Dies kann man durch Angabe einer Version, durch Zugabe eines "lt" (less than - 'kleiner'-Zeichen), "gt" (greater than - 'größer'-Zeichen) oder "lte" (less than or equal to - entspricht 'kleiner gleich'-Zeichen) erreichen.

Nach oben

Codeübersicht

Direkte Versionenvariation:

<!--[if IE]>
Nur im Internet Explorer aller Versionen zu sehen.
<![endif]-->

<!--[if IE 5]>
Nur im Internet Explorer 5.x zu sehen.
<![endif]-->

<!--[if IE 5.0]>
Nur im Internet Explorer 5.0 zu sehen.
<![endif]-->

<!--[if IE 5.5]>
Nur im Internet Explorer 5.5 zu sehen.
<![endif]-->

<!--[if IE 6]>
Nur im Internet Explorer 6 zu sehen.
<![endif]-->

Indirekte Versionenvariation:

<!--[if gte IE 5]>
Nur im Internet Explorer ab Version 5 zu sehen.
<![endif]-->

<!--[if lt IE 6]>
Nur im Internet Explorer kleiner Version 6 zu sehen.
<![endif]-->

<!--[if lte IE 5.5]>
Nur im Internet Explorer kleiner oder gleich Version 5.5 zu sehen.
<![endif]-->

<!--[if !IE 6]>
Nur im Internet Explorer außer Version 6 zu sehen.
<![endif]--> Nach oben

Syntax: Operatoren

Styntax: Operatoren Erläuterungen
! Der NOT-Operator. Er wird unmittelbar vor einen Ausdruck oder Wert plaziert und kehrt den Wert des Operanten ins Gegenteil um.
gt Der GRÖSSER ALS-Operator dient zum Vergleich von Ausdrücken und Werten und gibt true als Boolean Wert zurück, falls das erste Argument größer als das zweite ist.
gte Der GRÖSSER ODER GLEICH-Operator dient zum Vergleich von Ausdrücken und Werten und gibt true als Boolean Wert zurück, falls das erste Argument größer oder gleich dem zweiten ist.
lt Der KLEINER ALS-Operator dient zum Vergleich von Ausdrücken und Werten und gibt true als Boolean Wert zurück, falls das erste Argument kleiner als das zweite ist.
lte Der KLEINER ODER GLEICH-Operator dient zum Vergleich von Ausdrücken und Werten und gibt true als Boolean Wert zurück, falls das erste Argument kleiner oder gleich dem zweiten ist.
Nach oben

CC als Browserweiche

Ich verwende CC gerne als Browserweiche für den Internet Explorer, da es sich manchmal lohnt für diesen Browser (vorlallem bei den Versionen 5.x) ein extra-Stylesheet bereitzustellen. Der große Vorteil ist, dass im Gegensatz zu Javascript CCs absolut sicher sind, da man sie nicht deaktivieren kann - auch ist der Aufwand deutlich geringer als bei ähnlichen Verfahren mit Skriptsprachen (Javascript, PHP,...).

Beispiel: Ein Extra-Stylesheet für den IE 5.x einbinden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Beispiel</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 6]>
<link  href="style/ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>
...
</body>
</html> Nach oben

Weitere Informationen

Weitere Informationen finden Sie auf der Microsoft Entwicklerseite zum Thema Conditional Comments.

Kommentare







18.03.2005 Löschen

freq.9

hehe ich dachte diese komischen Kommentare würde Frontpage oder sowas immer in den Code einbinden ;)

18.04.2007 Löschen

ploehr

wichtig ist, den tslye für den IE *nach* dem eigentlichen zu notieren, sonst tut sich nix.

12.12.2008 Löschen

"Der große Vorteil ist, dass im Gegensatz zu Javascript CCs absolut sicher sind, da man sie nicht deaktivieren kann"
Ja, CCs kann man nicht deaktivieren, aber ABSOLUT sicher kann man sich dennoch nicht sein, da sicher der Browser nicht zu erkennen geben muss ("user agent switcher").

05.05.2009 Löschen

stereo

hi, kann mir jemand sagen was in der css datei für den IE dann drinstehen muss? ist dann ie5.css die gleiche wie style.css? dann halt nur anders eingebunden?!

Von paul. Letzte Änderung am 30.07.2005