Eines der schlimmsten Dinge für jeden Web-Designer, das zum Glück immer unwichtiger wird: Der Internet Explorer.
Spezielle Anweisungen für den Internet Explorer konnte man bis zur Version 9 einfach mit Conditional Comments ausführen lassen, bei welcher man für jede Browserversion (oder Gruppen davon) individuelle CSS-Befehle einsetzt.
Seit dem Internet Explorer 10 ist diese Möglichkeit nicht mehr vorhanden. Microsoft hat zwar einen großen Schritt in Sachen kompatible Web-Standards unternommen, aber leider funktionieren manche standardkonforme Sachen im Gegensatz zu den meisten anderen Browsern immer noch nicht so richtig.
Internet Explorer 10
Es gibt aber glücklicherweise einen Hack, der zudem noch CSS-Regelkonform ist: Das
media-query -ms-high-contrast,
es handelt sich dabei um einen eigenen Befehl speziell von Microsoft und ist kein Teil vom W3C-Standard. Kombiniert man das ganze noch mit active bzw. none, kann man so weiter spezielle Befehle für den Intenet Explorer 10 bereitstellen.
Möchte man nun CSS-Regeln nur für den Internet Explorer 10 festlegen, so gelingt dies einfach durch ein
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
(hier dann die Befehle für den IE10)
} Conditional Comments für Internet Explorer bis zur Version 9
Der IE6 bis IE9 kann einfach mit Conditional Comments erkannt werden. Es handelt sich um eine Standardkonforme Notation, welche für andere Browser als Kommentar erkannt werden.
<!--[if IE 7]> <link href="css/style_ie6.css" type="text/css" rel="stylesheet"/> <![endif]-->
Ebenfalls ist es möglich, statt konkret auf eine Version des Internet Explorers prüfen, auch mit anderen Vergleichsoperatoren wie = (gleich), < (kleiner), > (größer), >= (größer gleich), <= (kleiner gleich) zu arbeiten. Zusätzlich kann der Vergleich mit den logischen Operatoren & (und) sowie | (oder) verknüpft werden.
Beispiele:
Stylesheet für Explorer 7 und älter:
<!--[if lt IE 8]> <link href="ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
Spezielles Stylesheet für IE6:
<!--[if IE 6]> <link href="css/style_ie6.css" type="text/css" rel="stylesheet"/> <![endif]-->
Bereiche im Internet Explorer nicht anzeigen:
<!--[if !IE 8]><!--> <p>Alle nur nicht IE 8</p> <![endif]-->
Dies funktionert, da der HTML-Kommentar gleich hinter dem Conditional Comment <!– wieder geschlossen wird und so von anderen Browsern dargestellt wird.
Praxisbeispiel: Es soll ein transparentes PNG dargestellt werden. Der IE6 stellt es nicht dar, daher wird für den Explorer 6 eine GIF-Grafik dargestellt.
<!--[if !IE 6]><!--> <img src="logo.png" width="180" height="120" alt="Logo"/> <![endif]--> <!--[if IE 6]> <img src="logo.gif" width="180" height="120" alt="Logo"/> <![endif]-->
Conditional HTML Class
Eine weitere, in meinen Augen besonders elegante und auch valide Möglichkeit ist folgendes Vorgehen: Man legt eine (oder mehrere) CSS-Klassen für das HTML-Tag für verschiedene Internet-Explorer-Versionen an; natürlich wieder mit Conditional Comments. Man prüft dabei ob es der IE ist, um dann eine entsprechende Klasse an das HTML-Tag zu hängen. Um eine Version vom Explorer per CSS spezifisch zu formatieren, nutzt man dann einfach die Klasse als Hauptselektor (z.B. .ie6 .box).
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->Die Krönung für komplexe Webseiten sind Conditional Comments, mit welchen man unterschiedliche BODY-Tags generiert, um dann über die CSS-Cascade die unterschiedlichen Browser anzusprechen.