Conditional Comments
Mit Conditional Comments können HTML-Abschnitte ausschließlich im Internet Explorer ausgeführt werden.
Um einen HTML-Abschnitt ausschließlich im Internet Explorer auszuführen existieren die sog. Conditional Comments (bedingte Kommentare). Mit Ihrer Hilfe ist es möglich gezielt bestimmte Versionen des IE anzusprechen oder zu ignorieren. Es ist sogar möglich den Code nur für Internet Explorer größer oder kleiner einer bestimmten Version auszugeben. Den Möglichkeiten sind kaum Grenzen gesetzt.
HTML-Code nur im Internet Explorer ausführen
Der Syntax eines Conditional Comment ist denkbar einfach. Möchte man einen Code-Abschnitt nur im Internet Explorer ausgeben reicht folgender Kommentar. Alle anderen Browser ignorieren Conditional Comments und überspringen den Abschnitt daher.
<!--[if IE]>
Diesen Inhalt sehen alle Nutzer eines Internet Explorers
<![endif]-->
Conditional Comment Operatoren
Neben dem Standard-Aufbau des Kommentars existieren noch einige Operatoren um die Auswahl des Internet Explorers einzuschränken.
- !
- Schließt die Auswahl aus
- gt
- greater than – Spricht alle Internet Explorer Versionen an, deren Versionsnummer größer ist als die der Auswahl
- gte
- greater than equal – Spricht alle Internet Explorer Versionen an, deren Versionsnummer größer oder gleich der Auswahl ist
- lt
- lower than – Spricht alle Internet Explorer Versionen an, deren Versionsnummer kleiner ist als die der Auswahl
- lte
- lower than equal – Spricht alle Internet Explorer Versionen an, deren Versionsnummer kleiner oder gleich der Auswahl ist
Typische Conditional Comments
Die folgende Liste an Kommentaren sollte den Großteil aller Anwendungsfälle abdecken.
<!--[if IE]>
Diesen Inhalt sehen alle Nutzer eines Internet Explorers
<![endif]-->
<!--[if IE 6]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 6
<![endif]-->
<!--[if lt IE 7]>
Diesen Inhalt sehen alle Nutzer mit einem Internet Explorer kleiner Version 7
<![endif]-->
<!--[if IE 7]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 7
<![endif]-->
<!--[if lte IE 8]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 8 oder kleiner
<![endif]-->
<!--[if IE 8]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 8
<![endif]-->
<!--[if gte IE 8]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 8 oder größer
<![endif]-->
<!--[if gt IE 8]>
Diesen Inhalt sehen alle Nutzer mit einem Internet Explorer größer Version 8
<![endif]-->
<!--[if IE 9]>
Diesen Inhalt sehen alle Nutzer mit Internet Explorer 9
<![endif]-->
Conditional Comments im Internet Explorer 10 (IE10)
Der Internet Explorer 10 unterstützt leider keine Conditional Comments. Weitere Infos dazu findet ihr auf der offiziellen Website von Microsoft.
Praxisbeispiel HTML-Head
Conditional Comments werden häufig dazu eingesetzt, bereits im HTML-Head CSS-Klassen für die verschiedenen Versionen des Internet Explorers einzuschleusen. Über diese Klassen kann später gezieltes Bugfixing betrieben werden. Ein typisches Beispiel ist der Header der HTML5 Boilerplate.
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
HTML-Code in allen Browsern ausführen, nur in Internet Explorern nicht
Conditional Comments sind eine tolle Sache, leider erkennt nur ein Internet Explorer den entsprechenden Code-Abschnitt. Das bedeutet, dass auch wenn man mit einem Conditional Comment alle Internet Explorer ausschließt, die anderen Browser den Abschnitt ebenfalls nicht interpretieren.
Die Lösung für dieses Problem ist denkbar einfach. Man fügt einen klassischen HTML-Kommentar innerhalb eines negierten Conditional Comments ein. Alle Internet Explorer arbeiten den Kommentar ganz normal ab und führen den enthaltenen Code daher nicht aus. Die anderen Browser erkennen jedoch den schließenden HTML-Kommentar und interpretieren daher den Code innerhalb des Conditional Comment.
<!--[if !IE]> -->
Dieser Code wird von allen Browser interpretiert, die kein Internet Explorer sind.
<!-- <![endif]-->
Praxisbeispiel
Sinn macht eine solche Vorgehensweise im gesamten Umfeld des Themenkomplexes „Progressive Enhancement“. Angenommen eine Slideshow funktioniert in allen Browsern, nur im Internet Explorer kleiner/gleich Version 8 nicht. Mit dem o.g. Conditional Comment kann das Script nur in den Browsern geladen werden, in denen die Slideshow auch funktioniert. Für den IE 8 – IE6 würde dann eine Fallback-Lösung angeboten.
<!--[if lte IE 8]><!-->
<script src="slideshow.js" type="text/javascript">
<!--<![endif]-->