kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS-Hack für den Internet Explorer 10 (IE10)

Der Internet Explorer von Microsoft ist bekannt für die fehlerhafte Interpretation von CSS-Eigenschaften. Um das Problem zu lösen, greift man häufig auf Conditional Comments zurück, um gezielt einzelne Versionen des Internet Explorers anzusprechen und die Fehler zu korrigieren. Für den IE10+ existieren leider keine Conditional Comments mehr und ihr bekommt Schwierigkeiten, falls ihr speziell für diesen Browser Elemente gesondert ansprechen wollt. Doch mit einem CSS-Hack lässt sich das Problem lösen.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

CSS-Hack: -ms-high-contrast im IE10

Mit dem Media Query -ms-high-contrast könnt ihr Elemente speziell für den Internet Explorer 10 ansprechen und stylen. Dieser Media Query ist eine Eigenschöpfung von Microsoft und ihr werdet ihn daher nicht in der W3C-Spezifikation finden.

Der Query wurde mit Windows 8 zusammen eingeführt und wird seit Microsofts Edge-Browser nicht mehr unterstützt. Gedacht war der Media Query zur Unterscheidung von Bildschirmen mit verschiedenen Kontraststufen. Durch den Vendor-Präfix -ms- ist dieser Hack – im Vergleich zu vielen anderen Hacks – sogar standardkonform. Zusätzlich gewährleistet der Präfix, dass dieser Media Query wirklich nur vom Internet Explorer interpretiert wird. Durch Kombination der Werte active und none wird immer der Internet Explorer 10 angesprochen, egal in welchem Kontrastmodus sich die Seite befindet.

Folgendes Code-Beispiel verdeutlicht die Funktionsweise:


.box {
  height: 100px;
  background: green;
}

/* Die Box bekommt nur im Internet Explorer 10 einen roten Hintergrund. */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .box {
    background: red;
  }
}

Quellen / Links

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Boris Kaiser

    Verfasst am 21. August 2015 um 15:58 Uhr.

    Eine sehr gute Sammlung solcher CSS-Hacks findet man auch auf Browserhacks (http://browserhacks.com/).

  2. Tanja

    Verfasst am 26. August 2015 um 15:40 Uhr.

    Wie kann man den alle Internet Explorer ansprechen? Also nur die Internet Explorer bis Version 11?
    Danke schon mal für eure Hilfe

  3. Tanja

    Verfasst am 31. August 2015 um 10:46 Uhr.

    Wäre wirklich super, wenn mir jemand eine Lösung verraten könnte

  4. Mario Ohibsky

    Verfasst am 28. November 2016 um 23:17 Uhr.

    Es ist echt traurig, dass MS immer noch keinen Browser bietet, der CSS korrekt interpretiert, vor allem im Huinblick darauf, dass die Conditional Comments ausgemerzt wurden.

    @Tanja: Der obige Hack funzt auch mit dem IE 11, bei mir zumindest mit der aktuellen Version 11.0.36

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.