Stil mit {stil}

Aug 2008

CSS Conditional Comments – Browserweiche für Internet Exporer

Obwohl der große Teil der Fehler in der Darstellung von HTML-Elementen mit Stylesheets in den modernen Browsern inzwischen korrigiert ist, gibt es immer noch Abweichungen. Insbesondere Internet Explorer bringt in den älteren Versionen wie IE 6, aber auch noch in Version 7 Fehler mit, die durch »Conditional Comments« behoben werden können.

Conditional Comments oder »Bedingte Kommentare« sind style-Tags, die nur von Internet Explorer in den verschiedenen Versionen interpretiert werden. Sie werden im head-Element des HTML-Dokuments vereinbart.

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.

Beispiele für bedingte Kommentare

… für Internet Explorer 6, Internet Explorer 7 und für alle Versionen von Internet Explorer, die neuer sind als IE 5.

<!--[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
<style>
   #navlist a { height: 1em; 
              }
</style>
<![endif]-->

<!--[if gte IE 5]>       // Alle Versionen von Internet Explorer, 
<style>                  // die neuer sind als Version 5 
   #navlist a  { position: relative;
               }
</style>
<![endif]-->

<!--[if lt IE 8]>       // Alle Versionen von Internet Explorer, 
<style>                 // die neuer sind als Version 5 
   #navlist a  { position: relative;
               }
</style>
<![endif]-->

Import von CSS-Dateien in bedingten Kommentaren

Anstelle der direkten Auflistung von speziellen CSS-Regeln für die verschiedenen Versionen von IE kann innerhalb des style-Tags im bedingten Kommentar auch eine Stylesheet-Datei geladen werden: Import einer CSS-Datei über ein style-Tag im HEAD-Element.

<!--[if IE 7]>         // Wird nur von IE 7 interpretiert
<style>
@import url(/theme/style.css);
pre { background: silver; border: 1px solid silver; }
</style>
<![endif]-->