CSS3 PIE: border-radius und andere CSS3 Attribute im Internet Explorer nutzen

wpSEO, das Plugin für WordPress SEO

CSS3 ist momentan nicht umsonst in aller Munde – bietet es doch eine Vielzahl lang ersehnter Möglichkeiten zur Gestaltung moderner und zugänglicher Webseiten. Mehr und mehr Browser unterstützen es entweder durch vom W3C empfohlene Attribute oder durch eigene Interpretationen( -moz, -khtml, -webkit, usw.).

…bis auf einen – Microsoft unterstützt CSS3 genau wie auch HTML5 in größerem Umfang leider erst im IE9, welcher sich momentan noch im Beta-Stadium befindet. Abhilfe schaffen so genannte .htc (HTML Components) Dateien, welche vor Jahren bereits genutzt wurden, um dem IE5.5 und IE6 die Darstellung von transparenten PNG-Grafiken beizubringen. Mittlerweile gibt es mehrere dieser .htc – Lösungen, die dem IE teils mehrere, teils nur ein einziges CSS3-Attribut wie zum Beispiel border-radius beibringen.

Eine der umfangreichsten und komfortabelsten Lösungen ist CSS3 PIE. Neben der Unterstützung einer Vielzahl von CSS3 Funktionen bringt es auf der Projekt-Webseite auch Demos, einen einfachen Editor für Verläufe, Schatten und Radien, ausreichend Dokumentation und ein Forum mit.

Folgende CSS3-Attribute werden von CSS3 PIE momentan unterstützt:

Mehr zu den Features in der CSS3 Pie Dokumentation

Die Anwendung:

Zusätzlich zu den oben genannten Aufrufen für Browser mit CSS3-Unterstützung wird die vorher auf den Server kopierte .htc – Datei innerhalb der Selektoren mit CSS3-Attributen mittels behavior: url(pfad/zu/PIE.htc); aufgerufen. Zu beachten ist dabei, daß der Pfad zum .htc nicht wie gewohnt relativ zur CSS-Datei, sondern relativ zur HTML-Datei aufgerufen werden muss. Die einfachste Lösung wäre dem entsprechend in den meisten Fällen, das .htc ins Hauptverzeichnis der Seite zu schieben und mit /PIE.htc einzubinden.

Ein border-radius sieht nun also z.B. folgendermaßen aus:

1
2
3
4
5
6
#element {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
}

Andere Browser interpretieren das Microsoft eigene behavior Attribut nicht, dem entsprechend wird das ca. 20kB große .htc dort auch nicht geladen und die Ladezeiten nicht beeinflusst.

In welchem Umfang nutzt Ihr momentan CSS3?

Dieser Beitrag wurde unter webdesign abgelegt und mit , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.