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.

CSS3 Eigenschaft IE9 Support
opacity ja
multiple backgrounds ja
background-clip ja
background-size ja
background-origin ja
border-radius ja
box-shadow ja
box-sizing ja
transform ja (mit -ms-Präfix)
RGBA colors ja
HSL colors ja
HSLA colors ja
@font-face ja
@media ja
CSS3 Selektoren ja
CSS3 Eigenschaft IE9 Support
border-image nein
text-shadow nein
gradients nein
transitions nein
animations nein
multiple columns nein
resize nein

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).

flattr this!

10 Gedanken zu „IE9 CSS3 Support – CSS3 Adventskalender Tag 15“

  1. Immerhin ist Microsoft endlich auf dem richtigen Weg. Die fehlende gradient-Unterstützung kann man zumindest ansatzweise über die alten Filter nachrüsten. Dann gehen zwar keine Farbstops, aber normale Verläufe klappen dann auch mit dem IE9.

  2. Nach Aussagen von Microsoft hat man aus dem Thema IE6 gelernt und es soll nie wieder so kommen :)

    Darf man gespannt sein!

  3. habe gerade etwas damit herumgespielt, im IE9 ist alles super, aber auf dem WP7.5 funktioniert bei mir “-ms-transform” überhaupt nicht.

    muss man (neben dem doctype) noch irgendetwas anders machen, als man es sonst machen würde?

  4. wenn ich mit dem Gerät auf http://haz.io gehe, wird auch gesagt, dass es unterstützt wird. Aber die Realität sieht leider anders aus.

    Oder ich mache irgendetwas fundamental falsch, dann verstehe ich allerdings nicht warum es im Desktop IE funktioniert.

  5. hmm das funktioniert.

    Ich vermute langsam es liegt daran, dass ich die Datei eben schnell über das public Verzeichnis von Dropbox aufgerufen habe. Denn wenn ich deinen Code 1:1 kopiere und über Dropbox aufrufe klappt es auch da nicht.

    muss das mal in Ruhe von richtigem Webspace aus testen.

Kommentare sind geschlossen.