kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Conditional Comments

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.