CSS3-Effekte im Internet Explorer mit CSS3Pie
CSS3-Kram ist kein Spaß, wenn man sich seine Seite dann mal im Internet Explorer anschaut. Findige Menschen haben sich nun aber einen klugen Weg ausgedacht, um auch dem Internet Explorer ein wenig fancy CSS3 beizubringen. CSS3Pie heißt das Projekt, das mit Hilfe von Javascript in Form von Behaviors zumindest die Befehle border-radius, box-shadow und Farbverläufe zu implementiert.
Vorneweg: Es funktioniert, mit Einschränkungen. In der aktuellen Fassung wird so zum Beispiel der Parameter “inset” für box-shadow noch nicht unterstützt und die Befehle um nur einzelne Ecken abzurunden werden nicht interpretiert. Außerdem ist die Lösung nicht gerade die schnellste. Man kann nahezu sehen, wie die Effekte “angeschaltet” werden.
Um CSS3Pie arbeiten zu lassen, muss man allen Elementen die eben solche Befehle nutzen, eine behavior zuweisen. Ich mache das in einer eigenen CSS-Datei. Die Klassennamen und IDs der relevanten Elemente mit gewünschten CSS3-Features, kommen da alle mit Kommata getrennt rein:
#alle, #meine, .Elemente, .mit, #CSS-Kram
{
behavior: url("http://www.dertagundich.de/wp-content/themes/dertagundich7/js/pie.htc");
}
Wichtig ist, dass man den exakten Pfad vom Wurzelverzeichnis der Seite zur .htc-Datei angibt und nicht den relativen Pfad vom Theme-Verzeichnis aus. Außerdem gilt es zu beachten, dass nur die “richtigen” CSS3-Befehle interpretiert werden, -moz- und -webkit-Befehle nicht. Ich speichere die Angaben dann im Verzeichnis meines WordPress-Themes. Die CSS-Datei binde ich mit einem Conditional Comment in den head-Bereich meiner header.php ein.
<!--[if IE]> <link rel="stylesheet" type="text/css" media="all" href="http://www.dertagundich.de/wp-content/themes/dertagundich7/ie-behavior.css" /> <![endif]-->« »
Ich glaub der Internet Explorer 9 unterstütz glaube ich CSS3…
Naja, der Internet Explorer 9 ist sicherlich ein Schritt in die richtige Richtung. Es werden zumindest schon mal ein paar Befehle mehr interpretiert. Allerdings reden wir hier von einer Betaversion die kein Mensch benutzt und einige Menschen sehen das mit der “Unterstützung” auch anders.
Das oben vorgestellte Skript implementiert die CSS3-Befehle für die aktuell von Menschen benutzte Versionen des Internet Explorers.