Inhalt

CSS-Wiki.com

CSS Wiki.com CSS 2.1 und CSS 3 Alle CSS­Eigenschaften auf einen Blick! CSS-Wiki.com

Conditional Comments (Bedingte Kommentare)

Browserweiche für verschiedene Internet Explorer Versionen

HTML Code-Beispiel

Conditional Comments sind Browserweichen ausschließlich für die IE's bis zur Version 9. Innerhalb der standardkonformen Notation der Kommentare wird eine nur für den Internet Explorer auswertbare Bedingung geschrieben.?Ab dem IE 10 werden Conditional Comments jedoch nicht mehr unterstützt. 

<!--[if IE 7]>
   <link href="css/style_ie6.css" type="text/css" rel="stylesheet"/>
<![endif]-->

Alle anderen Browser sowie der IE ab der Version 10 behandeln diese Anweisung wie gewöhnliche Kommentare, der komplette Inhalt innerhalb der HTML-Kommentar-Syntax wird ignoriert.? 

Sie können neben der konkreten Versionsabfrage auch generell auf IE prüfen: <!--[if IE... . Auch andere Vergleichsoperatoren wie <, >, <= oder >= sind möglich.

Vergleichsoperatoren

Vergleich CC Bedeutung
< lt less than
<= lte less than or equal
> gt greater than
>= gte greater than or equal

HTML Code-Beispiel

<!--[if lte IE 6]>
   <p> IE, entweder Version 6 oder älter!</p>
<![endif]-->

Explorer bis zur Version 6 geben das HTML in diesem Quelltextbeispiel aus. 

Logische Operatoren

Operator CC Bedeutung
AND & einfaches kaufm. Und
OR | einfaches Pipe-Zeichen

HTML Code-Beispiel

<!--[if IE 6 | IE 8]>
   <p>IE Version 6 oder 8</p>
<![endif]-->

Das HTML innerhalb dieses Conditional Comments wird von Internet Explorer 6 oder 8 ausgegeben.?? 

CSS über einen Conditional Comment einbinden

Neben einzelnen HTML-Abschnitten ist es möglich, eine spezielle CSS-Datei innerhalb eines CC einzubinden: 

<!--[if IE 6]>
   <link href="css/style_ie6.css" type="text/css" rel="stylesheet"/>
<![endif]-->

Mit dem Einbinden einer CSS-Datei für eine spezielle Internet-Explorer-Version hat man die höchste Kontrolle über das CSS-Design.

Ausschluss über Conditional Comments

Das Verhalten der Conditional Comments kann man natürlich für seine Zwecke umkehren um bestimmte HTML-Abschnitte nicht anzeigen zu lassen.? 

<!--[if !IE 8]><!-->
   <p>Alle nur nicht IE 8</p>
<![endif]-->

Das HTML in diesem Beispiel wird nicht im Internet Explorer 8 dargestellt. 

Der Kniff an dieser Stelle ist, dass der HTML-Kommentar hinter dem öffnenden Conditional Comment geschlossen wird: <!-->
Nur so kann der folgende HTML-Abschnitt von den anderen Browsern dargestellt werden. 

Der Ausschluss - alleine betrachtet - mag vielleicht keinen Sinn machen. Der große Wert liegt in der geschickten Kombination der Conditional Comments: 

Praxisbeispiel

Als Beispiel sei hier die Einindung eines Bildes dargestellt. Da der Internet Explorer 6 keine Transparenzen von PNG-Dateien darstellt, kann es Sinn machen, für den IE6 statt eines PNG ein GIF einzubinden. Folgendes Beispiel zeigt die Umsetzung. 

<!--[if !IE 6]><!-->
   <img src="logo.png" width="180" height="120" alt="Logo"/>
<![endif]-->
<!--[if IE 6]>
   <img src="logo.gif" width="180" height="120" alt="Logo"/>
<![endif]-->

Auf heise.de war im August 2009 ein Bericht über Conditional Comments zu lesen, und wie man damit unterschiedliche BODY-Tags generiert, um dann über die CSS-Cascade die unterschiedlichen Browser anzusprechen. Interessanter Ansatz, funktioniert sicher sauber, die Lesbarkeit des HTML wird allerdings massiv erschwert. 

Bewertung

Mit dieser Schreibweise haben Sie eine sehr hohe Zukunftssicherheit. Selbst wenn andere Browseranbieter diese Conditional Comments implementieren würden, würde eine Abfrage nie auf die Zeichenkette IE prüfen! 

Alternative Bezeichnungen

Weiterführende Links

© 2008-2017 - Stephan Heller [daik.de]

Quatsch? Unsinn! Wie jetzt gleich?

Wir versuchen, alles zu testen und nur richtige Dinge zu schreiben, vielleicht haben wir aber hier und dort was übersehen, die Beschreibung ist in der Ausdruckweise nicht vollständig, oder es gibt Anregungen, was hier stehen sollte oder welcher Link noch fehlt.

Wir freuen uns über jede Anregung! Kurze Mail an mail@css-hack.de.


 
Anbieter: daik.de || hosted by Host Europe

CSS-Wiki.com || Foto Studio Köln || Barrierefreier kostenloser Webcounter