CSS3-Effekte im Internet Explorer mit CSS3Pie

CSS3-Kram ist kein Spaß, wenn man sich seine Seite dann mal im Inter­net Explo­rer anschaut. Fin­dige Men­schen haben sich nun aber einen klu­gen Weg aus­ge­dacht, um auch dem Inter­net Explo­rer ein wenig fancy CSS3 bei­zu­brin­gen. CSS3Pie heißt das Pro­jekt, das mit Hilfe von Java­script in Form von Beha­vi­ors zumin­dest die Befehle border-radius, box-shadow und Farb­ver­läufe zu implementiert.

Vor­ne­weg: Es funk­tio­niert, mit Ein­schrän­kun­gen. In der aktu­el­len Fas­sung wird so zum Bei­spiel der Para­me­ter „inset“ für box-shadow noch nicht unter­stützt und die Befehle um nur ein­zelne Ecken abzu­run­den wer­den nicht inter­pre­tiert. Außer­dem ist die Lösung nicht gerade die schnellste. Man kann nahezu sehen, wie die Effekte „ange­schal­tet“ werden.

Um CSS3Pie arbei­ten zu las­sen, muss man allen Ele­men­ten die eben sol­che Befehle nut­zen, eine behavior zuwei­sen. Ich mache das in einer eige­nen CSS-Datei. Die Klas­sen­na­men und IDs der rele­van­ten Ele­mente mit gewünsch­ten CSS3-Features, kom­men da alle mit Kom­mata getrennt rein:

#alle, #meine, .Elemente, .mit, #CSS-Kram
{
behavior: url("http://www.dertagundich.de/wp-content/themes/dertagundich7/js/pie.htc");
}

Wich­tig ist, dass man den exak­ten Pfad vom Wur­zel­ver­zeich­nis der Seite zur .htc-Datei angibt und nicht den rela­ti­ven Pfad vom Theme-Verzeichnis aus. Außer­dem gilt es zu beach­ten, dass nur die „rich­ti­gen“ CSS3-Befehle inter­pre­tiert wer­den, -moz- und -webkit–Befehle nicht. Ich spei­chere die Anga­ben dann im Ver­zeich­nis mei­nes WordPress-Themes. Die CSS-Datei binde ich mit einem Con­di­tio­nal Com­ment in den head–Bereich mei­ner 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]-->