Das optimieren einer Website für verschiedenen Internet Browser kann eine der Hauptaufgaben im Theming Prozess sein. Vor allem der Internet Explorer stellt die Entwickler immer wieder vor neue Herausforderungen. Häufig fällt der Satz "In allen anderen Browsern ist die Anzeige korrekt nur im IE sieht es nicht gut aus".

Zwar verliert der Browser immer weiter an Bedeutung - Ende 2017 surfte nur noch jeder Zehnte auf dem stationären Gerät mit dem IE - doch für eine Reihe unserer Kunden ist aus unternehmerischer Sicht der Umstieg auf einen anderen Browser aufwendiger zu bewerkstelligen als eine optimierte Website für den IE zu bauen. Im Jahr 2015 veröffentlichte Microsoft den Nachfolger Edge, der seitdem auf allen von Microsoft hergestellten Geräten als Standardbrowser installiert wird. Doch auch für den Edge benötigen die Entwickler immer wieder eigene Anweisungen um die Darstellung einer Website zu korrigieren.

Um die Komponenten für den Internet Explorer und Edge separat zu stylen, müssen Angaben via CSS gemacht werden. Wir zeigen nachfolgend welche Befehle jeder Programmierer kennen sollte: 

Alle IE Browser

<!--[if IE]>
body{ color: red; }
<![endif]-->

Kein IE Browser

<!--[if !IE]>
body{ color: red; }
<![endif]-->

Spezifische IE Browser Versionen

Es kommt häufig vor, dass nur bestimmte IE Versionen die CSS Angaben nicht verarbeiten können. Daher muss man spezifische Versions-Angaben machen.

IE 8 und kleiner IE Browser

lte = lower then + equal

<!--[if lte IE 8]>
body{ color: red; }
<![endif]-->

lt = lower then

<!--[if lt IE 9]>
body{ color: red; }
<![endif]-->

IE 8 und größer IE Browser 

gte = greater then + equal

<!--[if gte IE 7]>
body{ color: red; }
<![endif]-->

gt = greater then

<!--[if gt IE 8]>
body{ color: red; }
<![endif]-->

Besonderheit ab IE 10

Seit Internet Explorer 10 kann man per CSS keine IF Abfrage mehr machen, man muss einen Workaround machen.

Entweder man verneint alle anderen IE Versionen:

<!--[if !IE 8 && !IE 9 ...]>
body{ color: red; }
<![endif]-->

Die nächste Möglichkeit wäre dann mit JavaScript den UserAgent in HTML schreiben zu lassen und dann per CSS diesen auslesen zu lassen.

Javascript
var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

CSS

html[data-useragent*='MSIE 10.0'] body {
color: red;
}

Die dritte Möglichkeitkeit wäre Microsoft Browser spezifische Media Querys zu verwenden z.B. gibt es unter IE 10 :

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body { color: red; }
}

Mircrosoft Edge

Da seit dem Edge auch wieder neue CSS Anweisungen dazu kamen, kann man mit dieser Anweisung Komponenten stylen, die nur den Edge Browser ansprechen.

@supports (-ms-accelerator:true) {
body{
color: red;
}
}