Ich möchte hier keinen weiteren Artikel über die Unannehmlichkeiten schreiben, die einem der Internet Explorer in den den Versionen kleiner 9 so macht. Wobei man eigentlich die 9er Version auch mit in den Kreis der notwendigen Übel mit einbeziehen muss, da auch dieser noch nicht wirklich etwas mit CSS 3 Deklaration anfangen kann.
Liegt das nun an Microsofts Unfähigkeit Dinge zu implementieren, die andere bereits seid mehreren Versionen unterstützen? Oder bestreitet der Konzern aus Redmond noch immer einen Browserkrieg, in dem er meint durch seine beinahe Monopolstellung seine hauseigenen Standards durchsetzen zu können?

Nun, da darf sich jeder seine eigene Meinung bilden.

Es sollte allerdings nicht unerwähnt bleiben, dass Microsoft, wie bereits oben erwähnt, eigene Standards entwickelt hat, um CSS 3-Eigenschaften umzusetzen. Natürlich nennen sie das Ganze nur anders. In der Welt von Bill heisst das alles Filter und ist gelinde gesagt ein wenig „unübersichtlich“. Mal abgesehen davon, dass man schon mindestens 10 Semester Mathematik studiert haben sollte, um hinter die Syntax dieser Filter zu kommen.

Ein Beispiel. Wir wollen einem Hintergrund eine tranparente Farbe geben. Nichts leichter als das. So sieht das mit CSS 3 aus:

.box_rgba {
    background-color: transparent;
    background-color: rgba(180, 180, 144, 0.6); /* versteht sogar der IE 9 */
}

Nun müssen wir eine „kleine“ Code-Zeile ergänzen, damit der IE < 9 das auch hinkriegt:

.box_rgba {
    background-color: transparent;
    background-color: rgba(180, 180, 144, 0.6); /* versteht sogar der IE 9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
}

Wie man schon am Scrollbalken erkennen kann, kann das ja nun nicht die Lösung sein. Über die Syntax habe ich mich ja bereits ausgelassen. Außerdem kommt es bei Anwendung von Filtern nicht selten zu Problemen. Hier mal nur zwei Beispiele, was passieren kann, wenn man Filter einsetzt.

  • Es kann Probleme mit Links geben, die auf Filtern liegen. So kann es passieren, dass die Links nicht mehr anklickbar sind.
  • Filter sind eine proprietäre Technik, die nur vom IE unterstützt wird.

Nun ja, immerhin gibt es genug Entwickler auf dieser IE-bekämpfungs-Welt, die sich ihre Gedanken machen, wie sie es dem blauen E beibiegen können solche schicken CSS 3-Features wie border-radius korrekt zu interpretieren.

Eine Lösung sind .htc-Dateien (Nein, nicht der Smartphone-Hersteller ;-P). Mit ihnen wird der IE um bestimmte „Verhaltensweisen“ erweitert. Über den MIME-type AddType text/x-component .htc können .htc-Dateien in einer .htaccess-Datei implementiert werden.

Dieses Feature nutzt CSS 3 Pie aus und hat ein kleines Framework entwickelt, mit dem man dem IE < 9 CSS 3 beibringen kann. Die Dateien müssen dafür in das Root-Verzeichnis des Webservers (am besten in ein Verzeichnis „PIE“) kopiert werden und der Server muss PHP verstehen. Um nun einen border-radius für den IE umzusetzen ist folgender CSS-Code notwendig:

.borderRadius {
    border-radius: 20px;
    behavior: url(PIE/PIE.php);
}

Der Befehl behavior: ... ruft dann ein PHP-Wrapper-Script auf und führt den Inhalt der .htc-Datei aus.

Randnotiz:
CSS 3 Pie setzt zur Simulation der CSS3-Features auf VML (Vector Markup Language). Eine Erfindung von Microsoft, die aber vom W3C abgelehnt wurde.

Jetzt kann man auch im IE < 9 runde Ecken bei der Box bewundern. Ich bin gespannt, wie lange man noch diese Work-Arounds machen muss. Na ja, der IE 10 soll ja endlich nachziehen in Puncto Css 3. Mal sehen was die Zukunft bringt…

Links zum Artikel: