Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: HTML5 und CSS3 – Fortgeschrittene Techniken

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]-->

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: