IE9 CSS3 Support – CSS3 Adventskalender Tag 15

Heute mal ein Thema im CSS3 Adventskalender, das ja ab-und-zu etwas vernachlässigt wird, „IE9 CSS3 Support“ oder „was kann der IE9 überhaupt?“. Der Browser-Marktanteil des IE9 ist glücklicherweise steigend und wird mehr und mehr in Firmen und in Privathaushalten eingesetzt. Die Statistik zeigt, das in Europa aktuell ca. 10% mit IE9, ca. 16% mit IE8 und nur knapp 3% den IE7 verwenden. Dass der IE9 nicht so fortschrittlich ist, wie seine Konkurrenten, ist sicherlich auch hinlänglich bekannt. Mit der Einführung des neuen Betriebssystem „Mango“ für Windows Phone 7 ist nun auch der IE9 auf den Windows Phone 7 als Standard-Browser vorhanden und kann hier die neuen Features rund um HTML5 und CSS3 verarbeiten. Der Marktanteil ist sicherlich noch sehr gering, wird aber sicherlich steigen in den nächsten Jahren. Und wer behauptet, dass das Windows Phone 7 noch keine Relevanz hat, optimiert sicherlich noch für IE6 (#bewusstprovokantethese).

Übersicht – CSS3-Features IE9

Nun aber Butter bei die Fische, was geht mit dem Internet Explorer 9 und was nicht.

Darfs ein wenig mehr sein?

Ja gern, aber erst im IE10… Aber der IE9 unterstützt Größenangaben wie rem und vh, sowie vw (Blogartikel von Jonathan Snook). Allerdings sind die aufgeführten Eigenschaften (bis auf -ms-transform) ohne Präfix integriert, also standardkonform. Über das Rendering von border-radius wurde sich zudem ausführlich Gedanken gemacht und ist sehr gelungen meiner Meinung nach.

Eine Eigenschaft, die der IE9 unterstützt, aber auch noch nicht so häufig verwendet wurde, sind multiple Hintergrundbilder (background-image).

.box {
  background: url(images/background-1.png) no-repeat 50% 0,
              url(images/background-2.png) no-repeat 100% 100%;
}

Man sollte allerdings vorsichtig sein, wenn man für ältere Internet Explorer die filter-Eigenschaft verwendet, es kann dann zu Problemen führen. Ein Beispiel im Zusammenhang mit border-radius und linear-gradient habe ich hier beschrieben.

Link-Tipps

Was Entwickler über Internet Explorer 9 wissen sollten
Referenz: CSS3 Support in Internet Explorer 9
Internet Explorer 9 Guide for Developers
Internet Explorer Learning > CSS3
“Mobile first” CSS and getting Sass to help with legacy IE
Attention! IE9 will not destroy the world, kill babies, or take away your home or job.

Fazit

Der Internet Explorer 9 unterstützt mehr CSS3-Eigenschaften als erwartet, allerdings sicherlich weniger als erhofft. Und mit der Version 10 werden weitere CSS3-Eigenschaften unterstützt, bleibt nur zu hoffen, dass die älteren Versionen bald verschwinden. Als kleine Gute Tat, könnt ihr in den Weihnachtsfeiertagen die Browser eurer Verwandten updaten (wenn ihr das nicht schon getan habt).