Eines der größten Dilemmas für Web-Entwickler ist die Inkompatibilität verschiedener Internet Explorer-Versionen mit aktuellen Web-Standards. Obwohl Microsoft CSS3 und sogar HTML5-Unterstützung für IE9 versprochen hat, können Windows-Benutzer, insbesondere Unternehmen, weiterhin IE8, IE7 oder sogar den gefürchteten IE6 für die kommenden Jahre verwenden.

Daher wird die Codierung einer Website mit exklusiven CSS3-Funktionen nur einen großen Teil der Besucher Ihrer Website verprellen und sie dazu zwingen, einen standardkonformen Browser wie Mozilla Firefox oder Google Chrome herunterzuladen, der nur als arrogant wirkt.

Eine mögliche Lösung für das Problem besteht darin, einen Modernisierer zu verwenden, bei dem es sich um ein Skript oder eine Anwendung handelt, die eine Vielzahl von Tricks verwendet, um Ihre Website in allen Browsern so anzuzeigen, wie sie sollte. CSS3 Pie ist JavaScript-basierter Modernisierer, der Internet Explorer dabei unterstützt, coole CSS3-Funktionen wie abgerundete Ecken, weiche Schlagschatten und Verlaufsfüllungen zu erkennen. Es ist schnell, einfach und funktioniert die meiste Zeit mit sehr wenig Feinabstimmung.

Installation und Einrichtung

Dieses kurze Tutorial setzt voraus, dass Sie bereits eine Website mit CSS3-Elementen haben. Damit CSS3 Pie funktioniert, müssen Sie zwei Dinge tun: Laden Sie das Javascript-Paket hoch und fügen Sie Ihrer CSS-Datei speziellen Code hinzu.

1. Der Download von der Website css3pie.com enthält eine Reihe von Dateien, aber wenn alles wie geplant abläuft, benötigen Sie nur PIE.htc, eine komprimierte Textdatei. Laden Sie es an einen Ort auf Ihrem Webserver hoch, auf den Ihre CSS-Datei zugreifen kann.

2. Öffnen Sie Ihre CSS-Datei in Ihrem Texteditor und suchen Sie nach den Elementen, die CSS3-Eigenschaften enthalten. Fügen Sie innerhalb dieser Elemente die folgende Regel hinzu:

 Verhalten: URL (PIE.htc);

Der Pfad zu Ihrer PIE.htc-Datei muss genau sein. Wenn Sie sich nicht im selben Verzeichnis wie Ihre CSS-Datei befindet, ändern Sie sie entsprechend.

Das letzte Element sollte in etwa so aussehen:

 # element1 {Rahmen: 1px fest # 696; Auffüllen: 60px 0; Textausrichtung: Mitte; Breite: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; Rand-Radius: 8px; Hintergrund: # EEFF99; Verhalten: URL (PIE.htc); }

Wenn es korrekt funktioniert, sollten Sie die Ergebnisse in IE 6, 7 und 8 sofort nach dem Hochladen der geänderten CSS-Datei sehen.

Fehlerbehebung

Wenn Sie überhaupt keine Änderungen sehen, müssen Sie wahrscheinlich den Pfad zu Ihrer PIE.htc anpassen oder sogar die vollständige URL verwenden. Denken Sie daran, dass der IE nur eine HTC-Datei von derselben Domain wie die Site akzeptiert, und "www.site.com" und "site.com" werden als zwei verschiedene Domains betrachtet.

Unter bestimmten Umständen müssen Sie möglicherweise PIE_uncompressed.htc oder sogar PIE.php versuchen, damit es richtig funktioniert. Weitere Informationen finden Sie in der Dokumentation.

Ich habe festgestellt, dass die Kombination aus Transparenz und fettem Text zu einigen verrückten Wörtern in IE8 führt. In diesen Situationen müssen Sie möglicherweise transparente Hintergründe verwenden.

Die Kombination von CSS3 Pie und einigen jQuery-Funktionen scheint einen Fehler in IE zu erzeugen. Ich habe dafür keine Lösung gefunden, trotzdem lädt und zeigt die Seite trotzdem richtig an.

Modernisierung

Mit sehr wenig Aufwand kann CSS3 Pie dazu beitragen, dass Ihre Website in allen gängigen Browsern durchgängig ansprechend aussieht, ohne dass Sie dabei Eckbilder erstellen oder falsche Schlagschatten erstellen müssen. Die Titelseite der Website enthält eine Demo, mit der Sie CSS3-Eigenschaften anpassen und die Live-Ergebnisse in Internet Explorer anzeigen können. Das Beste von allem CSS3 Pie ist kostenlos und Open Source und kostenlos zum Download verfügbar.