CSS, HTML und Javascript mit {stil}

CSS Conditional Comments – Browserweiche für Internet Explorer

Conditional Comments: Fehler in IE[RIP!]

Conditional Comments oder »Bedingte Kommentare« sind HTML-Kommentare, die nur von Internet Explorer ab IE5 bis einschließlich Version 9 interpretiert werden.

Sie enthalten meist CSS im Head-Bereich der Webseite, das nur für IE bestimmt ist, können aber auch im body ganze Passagen auf IE beschränken oder vor IE verbergen.

Internet Explorer ist bis IE9 das Schlusslicht mit Lücken, die durch »Conditional Comments« umgangen werden können. Ab Version 10 sind Conditional Comments für IE außer Kraft gesetzt (IE10 unterstützt bereits den Browser-Präfix, mit dem Stile in einem frühen Stadium der Standardisierung benutzt werden können).

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

Bedingte Kommentare werden in HTML-Kommentare gesetzt. In viereckigen Klammern […] sitzt die Abfrage nach der Browserversion. Am Ende leitet ein endif in viereckigen Klammern […] den Kommentar wieder aus.

CSS für IE

Conditional Comments gibt es nur für IE. Sie werden eingesetzt, um CSS-Eigenschaften, die zu einer falschen Anzeige führen, gezielt für IE zu überschreiben.

Darum werden die CSS-Regeln für korrekte Browser zuerst notiert. Erst danach überschreiben CSS-Regeln in Conditional Comments die Eigenschaften für CSS.

<link rel="stylesheet" type="text/css" />

<!--[if IE 9]>
<style type="text/css" media="screen">
    #nav { width: 250px; margin-right: 15px; }
</style>
<![endif]-->

IE interpretiert Conditional Comments sowohl im HEAD als auch im BODY der HTML-Seite. Sie wirken also nicht nur, wenn CSS-Eigenschaften für IE-Versionen definiert werden, sondern verbergen auch HTML oder Javascript vor IE oder beschränken HTML-Tags auf IE.

Anstelle der Auflistung von CSS-Regeln für die verschiedenen Versionen von IE kann auch eine CSS-Datei innerhalb des Conditional Comments geladen werden: CSS-Datei einbinden.

<!--[if IE 9]>         // Wird nur von IE 9 interpretiert
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

Beispiele für bedingte Kommentare

<!--[if IE 6]>		// Wird nur von IE 6 interpretiert
<style>
   #navlist a { height: 1em; float: left; }
</style>
<![endif]-->
<!--[if IE 7]>		// Wird nur von IE 7 interpretiert

<!--[if gte IE 8]>	// IE, neuer als Version 8

<!--[if lt IE 8]>	// älter oder gleich Version 8 

<!--[IF !IE]> -->		// Code für andere Browser als IE
   Für alle Browser außer IE	// Kommentar-Tags beachten!
<!-- <![ENDIF]-->	

<!--[if (IE 8)|(IE 9)]>
  <p> Nur IE8 oder IE9 </p>
<![endif]-->

Das Ende der Browser-Erkennung

Conditional Comments waren immer umstritten: Änderungen am Design sind aufwändig. Zudem verhelfen diese Korrekturen fehlerhaften Browser zu einem längerem Leben und lassen Besucher und Benutzer im Glauben, ihr Browser wäre »OK«.

Aber Conditional Comments waren strikter als Browserhacks (die mit der nächsten Browsergeneration zu Darstellungsfehlern führen können). Sie haben das CSS einfacher gehalten als die Tricks und Hacks gegen die bekannten Browserfehler.

Ist das Icon blau? Dann ist es Internet Explorer. Ist das Icon rot? Dann könnte es auch Internet Explorer sein.

Mit dem Auftreten von IE10, IE11 und Edge ist es vorbei mit der Browsererkennung »IE oder nicht IE«. Erkannt werden nur die Browser bis einschließlich IE 9.

Die moderne Alternative ist die Feature-Erkennung.

Modernizr: Alternative zu Conditional Comments

Auch wenn IE10 den Standards näher kommt und sich um den Anschluss an die modernen Browser bemüht, bleiben empfindliche Lücken. »Feature Detection« wird von Modernizr zur Verfügung gestellt. Modernizr ist ein kleines Javascript, das prüft, ob der Browser bestimmte Javascript-Funktionen oder CSS-Eigenschaften unterstützt.

Auf der Modernizr-Download-Seite stellt man sich die gefragten Funktionen zusammen, erzeugt das Modernizr-Script und bindet es in das Projekt ein.

Per Vorgabe setzt Modernizr CSS-Klassen für jede unterstützte Funktion in das html-Tag – wenn der Browser das Feature nicht unterstützt , sitzt ein no-Präfix vor dem Klassennamen.

.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

oder für Javascript-Features

Modernizr.on('flash', function( result ) {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

Alle Versionen von IE entdecken

Bis einschließlich IE11, wird ab EDGE auch nicht mehr unterstützt: -ms-high-contrast

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   img[src*=".svg"] { width: 100%; }
}