Inhalt

CSS-Wiki.com

CSS Wiki.com CSS 2.1 und CSS 3 Alle CSS­Eigenschaften auf einen Blick! CSS-Wiki.com

Internet Explorer 10

Der Internet Explorer steht schon von jeher für eine abweichende Darstellung von HTML und CSS. Internet Explorer 6 und 7 waren vergleichsweise einfach zu ?hacken?, sind aber heute nicht mehr marktrelevant.

Was bislang über Conditional Comments (Bedingte Kommentare) einfach zu bewerkstelligen war, da man für jede Browserversion oder eine Gruppe von Versionen individuelle CSS-Dateien hinterlegen konnte, fällt mit dem Internet Explorer 10 weg. Conditional Comments sind beim IE 10 raus. Schade eigentlich.

Allerdings kann der Internet Explorer 10 derweil gut mit den anderen Browsern mithalten. Ob HTML5 oder CSS3, vieles kann diese neue Browserversion aus dem Hause Microsoft ebenso gut wie Firefox oder Google Chrome.

@media -ms-high-contrast-Hack

Braucht man eine individuelle Anweisung für den Internet Explorer 10, hilft einer der neuen Media-Queries: -ms-high-contrast ist dabei eine eigene Schöpfung von Microsoft und kein Teil vom W3C-Standard.

Durch die Kombination von zwei Werten active und none für -ms-high-contrast ?erwischt? man somit immer den Internet Explorer 10, egal, in welchem Kontrastmodus eine Seite angezeigt wird.

Das Positive im Gegensatz zu vielen anderen Hacks: Durch die Verwendung des Vendor-Präfix -ms- ist diese Schreibweise standardkonform. Vor allem aber auch sicher, dass kein anderer Browser über diese CSS-Regel stolpert, da -ms- ausschließlich vom Internet Explorer interpretiert wird.

Beispiel für Internet Explorer 10-Hack

HTML-Code

<div class="ie10-demo">eine Box</div>

CSS-Code

div.ie10-demo {
    border: 1px solid black;
    padding: 1em;
    background-color: lightgreen;
}
/* Nur Internet Explorer 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    div.ie10-demo {
        background-color: lightsalmon;
    }
}

Darstellung

eine Box

Die oben notierte CSS-Regel führt dazu, dass lediglich im Internet Explorer 10 die Hintergrundfarbe in einem hellen Lachs-Ton angezeigt wird, alle anderen Browser zeigen eine hellgrüne Hintergrundfarbe an.

Das Prinzip ist relativ einfach, alle speziellen CSS-Regeln, die für den Internet Explorer 10 benötigt werden, können innerhalb der @media -ms-high-contrast()-Regel hinterlegt werden. Fertig ist der Internet Explorer-10-CSS-Hack ;-)

Weiterf?hrende Links

© 2008-2017 - Stephan Heller [daik.de]

Quatsch? Unsinn! Wie jetzt gleich?

Wir versuchen, alles zu testen und nur richtige Dinge zu schreiben, vielleicht haben wir aber hier und dort was übersehen, die Beschreibung ist in der Ausdruckweise nicht vollständig, oder es gibt Anregungen, was hier stehen sollte oder welcher Link noch fehlt.

Wir freuen uns über jede Anregung! Kurze Mail an mail@css-hack.de.


 
Anbieter: daik.de || hosted by Host Europe

CSS-Wiki.com || Foto Studio Köln || Barrierefreier kostenloser Webcounter