CSS3 Features für den Internetexplorer IE mit CssPIE

Aktualisiert 15. November 2013Ach wie schön ist die neue Welt der runden Ecken, der vielfältigen Schatten hinter den Containern oder schönen Farbverläufen bei Hintergründen und Navigationsbuttons. Wo man früher viele Grafiken erzeugen, sie zerschnippeln und positionieren musste, reicht heute ein CSS-Code hier und da und man baut schicke Website. Firefox, Opera, Safari, Google Chrome sind sehr zahm und fortschrittlich und zeigen diese Features gerne.

Aber nein, da ist ja noch der Internetexplorer. Zum Glück stirbt der IE6 langsam aus. Aber Version 7 und 8 werden wohl noch lange Zeit installiert sein. Das ist ein Problem für den modernen Webdesigner. Denn der Kunde möchte ja auch gerne, dass seine Seite für jeden Surfer annähernd gleich aussieht.

Der Internetexplorer kann auch CSS3

Es gibt einige Ansätze, wie man z.B. runde Ecken – übrigens ein blöder Ausdruck – im Internetexplorer realisieren kann. Diese rounded Corners – im englischen auch nicht besser ausgedrückt – werden oft über jQuery-Scripte realisiert. Diese kommen sich aber gerne mit Lightboxes, Slider o.ä. ins Gehege. Ausserdem möchte man doch gerne die Vollausstattung. Dafür gibt es seit einiger Zeit ein tolles Tool: cssPIE – Progressive Internet Explorer www.css3pie.com.

Dieses Tool ermöglicht diese tollen runden Ecken, schönen Farbverläufe und Schatten, die von Webdesignern gerne eingesetzt werden. Endlich ist es möglich die meisten Internetsurfer auch optisch zu erfreuen.

Die Installation ist auf der Seite genau beschrieben. Es gibt fast keine Probleme. Nur 3 Dinge sollten beachtet werden:

1. Manchmal lädt es nicht zuverlässig – ein wenig Geduld sollte da sein.
2. Der Pfad zur PIE.htc ist relativ: behavior: url(path/to/PIE.htc); Man sollte immer vom betrachteten HTML aus gehen. Falls man mit einem Content-Management-System arbeitet, bei dem die Templates durch ein URL-Rewrite umgeschrieben werden, hilft es manchmal auch mit behavior: url(www.domain.de/PIE.htc); direkt den Pfad aufzurufen.
3. In der .htaccess sollte man nicht vergessen einzutragen: AddType text/x-component .htc Sonst sucht man ewig nach der Lösung warum es nicht klappt mit den runden Ecken, Verläufen und Schatten im InternetExplorer.

Ansonsten ein geniales Tool, das ich sowohl hier in diesem Blog, als auch schon in einigen Kundenprojekten einsetze. So sei hier einmal die schicke Website der Zahnarztpraxis in Norderstedt genannt.

Viel Spaß mit Schatten, Farbverläufen und runden Ecken in der bunten Welt des Webdesigns!