CSS Conditional Comments für IE und moderne Alternativen

Conditional Comments, Bedingte Kommentare für alte Internet Explorer

Conditional Comments oder Bedingte Kommentare waren HTML-Kommentare, die nur von Internet Explorer ab IE5 bis einschließlich Version 9 interpretiert wurden.

Sie enthielten 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.

Aus der Mottenkiste

Internet Explorer war bis IE9 ein Schlusslicht mit bodenlosen Löchern, die durch Conditional Comments umgangen werden konnten. Microsoft hat den Support für IE IE9 im Februar 2016 eingestellt (gleichzeitig auch den Support für IE10). Ab IE10 sind Conditional Comments für IE außer Kraft gesetzt und die Browsererkennung »IE oder nicht IE« ist beendet. Alternativen sind die supports-Regel und die Feature-Erkennung.

IE10 unterstützt bereits den Browser-Präfix, Microsoft Edge unterstützt die CSS @supports-Regel, mit der Stile in einem frühen Stadium der Standardisierung benutzt werden können.

<!--[if IE ]>
  <link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->
Kann IE10, IE11, Edge, Chrome, Firefox, Safari oder Opera sein.

Ist das IE-Icon grau? Dann ist es Internet Explorer. Ist das Icon rot? Dann könnte es auch Internet Explorer sein. Heute unterstützen die Browser neue Eigenschaften nicht erst mit einer vollkommen neuen Browser-Version, sondern neue Eigenschaften tröpfeln auch bei kleineren Updates ein. Darum reichen Conditional Comments nicht mehr.

Conditional Comments waren umstritten: Änderungen am Design sind aufwändig. Zudem verhalfen diese Korrekturen fehlerhaften Browser zu einem längerem Leben und ließen 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.

CSS für IE

Conditional Comments gab es nur für IE. Sie wurden eingesetzt, um CSS-Eigenschaften, die zu einer falschen Anzeige führen, gezielt für IE zu überschreiben. Darum wurden die CSS-Regeln für korrekte Browser zuerst notiert. Erst danach überschreiben CSS-Regeln in Conditional Comments die Eigenschaften für CSS.

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.

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

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

IE9 und älter interpretieren Conditional Comments sowohl im HEAD- als auch im BODY-Element. Sie verbergen auch HTML oder Javascript vor IE oder beschränken HTML-Tags auf IE.

Innerhalb des Conditional Comments kann auch eine CSS-Datei geladen werden: CSS-Datei einbinden.

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

CSS @supports-Regel

Ab Microsoft Edge unterstützen alle modernen Browser die @supports-Regel – eine Abfrage auf bestimmte Eigenschaften direkt im CSS. Die @supports-Regel macht Feature Detection mit Javascript / Modernizr überflüssig.

Die Supports-Regel hilft auch bei der Erkennung von Browsern, die @supports noch nicht erkennen:

Internet Explorer 9, 10 und 11 mit CSS ansprechen

@media screen and (min-width:0\0) { 
   /* CSS für alte Versionen von IE */
   .iewrap { border: 4px solid red}
   .iewrap p { color: red; text-align: center; }
   .iewrap p:before { content: "Nur Rot in IE 9, 10 und IE11: "; }
}

oder – bis einschließlich IE11, wird ab EDGE nicht mehr unterstützt: -ms-high-contrast

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

Microsoft Edge erkennen

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

IE11, der Letzte und das Letze

Die Rolle des Schlusslichts hat jetzt IE11, der Oktober 2013 eingeführt wurde. Nach Angaben von Microsoft wird IE11 noch bis zum Ende des Lifecycle von Windows 10 unterstützt – also noch bis Oktober 2025.

Modernizr : Alternative zu Conditional Comments

Auch wenn IE11 trotz seines hohen Alters mit HTML5 und selbst mit CSS display: flex / display: grid noch erstaunlich gut Schritt halten kann, bleiben empfindliche Lücken, denn IE11 unterstützt die supports-Regel nicht. Feature Detection wird von Modernizr zur Verfügung gestellt. Modernizr ist Javascript und 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-image: 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
  }
});