Internet Explorer Conditional Comments

Browserweiche Internet Explorer

Conditional Comments

Da der IE häufig proprietäres CSS und zusätzlich alternative CSS-Definitionen benötigt sollte man eine Trennung von Standard-Stylesheets und Browserspezifischen Erweiterungen vornehmen um die Standard-Browser nicht zu beeinflussen. So werden die globalen Styles für den jeweiligen Browser über eine zusätzliche CSS-Datei erweitert oder überschrieben.

Beispiel

<link href="/styles.css" rel="stylesheet" type="text/css"/>

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

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

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

Kleine Erklärung

if IE = alle IEs ab Version 5 werden angesprochen
if IE X = nur die jeweilige Version X wird angesprochen
if lt IE X = nur die jeweiligen Versionen kleiner als X werden angesprochen
if lte IE X = nur die Version X sowie vorherige Versionen werden angesprochen
if gt IE X = nur neuere Versionen als Version X werden angesprochen
if gte IE X = die Version X sowie neuere Versionen werden angesprochen
if IE 7 | IE 8 = nur der IE7 oder IE8 wird angesprochen

Internet Explorer 6 und 7 ohne Conditional Comments ansprechen

/* Internet Explorer 6 */
* html .box {background: red;}

/* Internet Explorer 7 */
*+ html .box {background: green;}

Im Internet Explorer 10 funktionieren Conditional Comments nicht mehr.
Hier muss z.B. mit JavaScript etwas getrickst werden:

<script type="text/javascript">
if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
}
</script>
Impressum