8x bewertet

Conditional Comments

von Nekoji  |  19.08.2008 um 10:59 h
CSS Anwendungen
Typ: CSS Anwendungen
Stufe:Einfach Mittelmäßig
Conditional Comments ermöglichen es, die Browserversion abzufragen und für jede Version unterschiedliche Stylesheets zu verwenden.

In dem folgenden Code seht ihr, wie via Conditional Comments abgefragt wird, ob der Internet Explorer (IE) 5, 5.5, 6 oder 7 verwendet wird und dann das entsprechende Stylesheet über den <link>-Tag geladen wird:

<!--[if IE 5]>
<link href="ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 5.5]>
<link href="ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->


Als Standard-Stylesheet könnt ihr dann einen für Firefox optimierten verwenden und davor ohne Abfrage einbinden.

Wenn ihr nicht extra für jede IE-Version einen anderen Stylesheet einbinden wollt, könnt ihr die Abfragen mit Hilfe von sogenannten Operatoren auch ein wenig anpassen. Hierbei gibt es folgende Möglichkeiten:

Operatoren:

! = Not-Operator (Ungleich)
lt = Kleiner-als-Operator (Kleiner als)
lte = Kleiner-als oder Ist-Gleich-Operator (Kleiner gleich)
gt = Größer-als-Operator (Größer als)
gte = Größer-als- oder Ist-Gleich-Operator (Größer gleich)

Beispiele:

<!--[if !IE 5.5]> Wenn nicht Version 5.5 <![endif]-->
<!--[if lt IE 6]> Wenn kleiner als Version 6 <![endif]-->
<!--[if lte IE 5.5]> Wenn kleiner oder gleich Version 5.5 <![endif]-->
<!--[if gt IE 5]> Wenn größer als Version 5 <![endif]-->
<!--[if gte IE 5.5]> Wenn größer gleich Version 5 <![endif]-->


Ich hoffe das hat euch weitergeholfen. Ansonsten könnt ihr auch eine auf PHP basierende Browserweiche verwenden.
Das Tutorial dazu findet ihr hier: Browserweiche



13 Kommentare




Hmm, das ist ja doch viel einfach als ich dachte Smilie

Sehr gut beschrieben, ich hätte da aber noch eine Bitte:

Vielleicht könntest du auch ein Beispiel machen für: if Firefox, IE, Opera ohne die Version. Wenn das gehen würde...

Ansonsten, schönes Tut
Smilie
am 19.08.2008 um 11:08 Uhr


Nekoji

Naja, die Conditional Comments sind nur für Internet Explorer Versionen gedacht. Firefox und Opera sind sich ziemlich ähnlich, daher würde ich ein Standard-Stylesheet für die beiden machen, dieses wie gewohnt einbinden und zusätzlich ein extra Stylesheet für den IE via Conditional Comments einbinden. Dann hast du normal dein Standard-Stylesheet für FF und Opera und wenn jemand IE benutzt wird das andere Stylesheet verwendet. Ansonsten kannst du ja die PHP-Browserweiche ausprobieren (siehe Link unten), da kannst du wirklich jeden Browser extra abfragen.
am 19.08.2008 um 11:11 Uhr


Tanya C. Silver

Ich liebe die Conditional Comments <3. Hab sie erst selber kürzlich kennen gelernt ^^.

Gut geschriebenes Tutorial, da gibt es von mir die volle Punktzahl für ^^.
am 19.08.2008 um 11:29 Uhr


Nekoji

Dankeschön! :)
am 19.08.2008 um 11:31 Uhr


Fr34k

huhu :) das kannte ich ja noch gar nicht! super cool, danke schön, das hilft mir erheblich weiter, da es immer Probleme mit dem IE gibt (in FF funzt alles wunderbar) :)
am 19.08.2008 um 13:41 Uhr


Mario

Danke Smilie
am 20.08.2008 um 20:24 Uhr


Delite

Mit * html vor den css-klassen direkt in der css-datei kann man auch den ie-code schreiben, dann muss man nicht alles doppelt haben =)
am 20.08.2008 um 20:59 Uhr


Delite

trotzdem tolles tut 6 sterne! Smilie
am 20.08.2008 um 20:59 Uhr


Flügel

Mir gefällt das tut auch gut ... also es ist interessant. aber prinzipiell verstehe ich nicht, was dagegen spricht einen sauberen code zu schreiben, der auf allen Browsern zum selben ergebnis führt? ... o.O
am 18.09.2008 um 14:22 Uhr


Nekoji

@Delite: * und html definieren, wenn ich mich nicht irre, die Eigenschaften für das gesamte Dokument und nicht nur für den Internet Explorer.
am 25.09.2008 um 20:21 Uhr


Antihero

Echt tolles Tutorial! xD
Danke wirklich danke >3
Und an die Kommis x′DDDDDD
am 18.11.2009 um 12:07 Uhr


Lee Hawn

Irgendwie funktioniert das nicht bzw. der will den Stylesheet bei mir gar nicht beachten... :/
am 22.05.2010 um 16:22 Uhr


Lee Hawn

hat sich erledigt :)
am 22.05.2010 um 16:36 Uhr