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

Von: Robert, Jonas

In diesem Beitrag findet ihr einen CSS-Hack um den Internet Explorer 10 gezielt anzusprechen.

Aktualisiert von 2015 – 2023 5 Kommentare

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.

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

• CSS Hacks – Internet Explorer 10
• Microsoft Developer Network – Conditional comments are no longer supported

Geschrieben von:

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing