CSS3 PIE | Dekoratives mit und ohne CSS3

von Henry Zeitler

Webseiten mit CSS3-Eigenschaften aufzuhübschen, ist gerade groß in Mode. Reden wir an dieser Stelle von solchen dekorativen Eigenschaften, sind in erster Linie border-radius, box-shadow, border-image, linear-gradient, text-shadow, multiple Backgrounds und rgba-Farbwerte gemeint. Deren Verwendung kann dem Webdesigner einige Stunden Arbeitszeit ersparen. Die Wartbarkeit der Projekte nimmt enorm zu, denn der Webworker muss im Falle einer Änderung oder Anpassung nicht mehr diverse Grafiken erneuern, sondern lediglich ein paar Zeilen Code ändern.

Diesen Artikel habe ich für die Webkrauts verfasst. CSS3 PIE | Dekoratives mit und ohne CSS3

Aber CSS3 sollte mit Bedacht implementiert werden, damit die Internetseiten in alten Browsern nicht unbrauchbar werden. Ältere Browser können zwar diverse Effekte mit Javascript-Bibliotheken nachempfinden, diese können jedoch den Browser ausbremsen. Daher solltet ihr immer überlegen, ob eine intelligente Fallback-Lösung nicht die bessere Alternative ist.

Vorüberlegung: Progressive Enhancement und Fallback-Lösungen

Jeder Webdesigner, der CSS3 in seinem Projekt einsetzen will, wird sich vorher über die Browserkompabilität der entsprechenden Eigenschaften informieren wollen. Dafür gibt es eine Vielzahl von Checklisten im Internet – eine sehr ausführliche, übersichtliche und aktuelle Liste ist When can I use….

Beim Studieren der Browserkompabilitäten wird schnell klar, dass ihr CSS3 zur Zeit nur unter Vorbehalt eingesetzen könnt. Zuviele alte Browser sind noch im Umlauf, die CSS3 nur teilweise oder gar nicht interpretieren.
Ob nun runde Ecken im alten Browser eckig erscheinen, dürfte der Benutzbarkeit der Internetseite keinen Abbruch tun; allerdings könnte das bei einem verschwundenen halbtransparenten Hintergrund und der Lesbarkeit des darüber liegenden Textes schon anders aussehen. Das Prinzip von Progressive Enhancement bietet sich hier an: die Internetseite für Browser ohne CSS3 konzipieren und für die modernen Browser mit CSS3 erweitern.
Die andere Variante stellen durchdachte Fallback-Lösungen dar. Hier ein Beispiel:

Freizeitler.de in einem modernen Browser
Freizeitler.de in einem modernen Browser

Freizeitler.de in einem alten Browser
Freizeitler.de ohne Unterstützung von rgba im IE 8

CSS3 PIE – Progressive Internet Explorer

Für den Fall, dass Fallback-Lösungen nicht ausreichen und der IE ebenfalls ein adäquates Ergebnis abliefern soll, besteht die Option, auf Javascript-Lösungen zurückzugreifen. Eine, die sich etabliert hat, ist CSS3 PIE von Jason Johnston. CSS3 PIE befindet sich zu diesem Zeitpunkt noch in der Version 1.0beta5.

Logo von CSS3 PIE

PIE ist unkompremiert 40K groß (mit Gzip nur noch 16K) und unterstützt folgende, dekorative CSS3-Eigenschaften:

CSS3 PIE richtig ins Stylesheet einbinden

Die Einbindung ist denkbar einfach und geschieht im Stylesheet. Über behavior: url(Pfad/PIE.htc); wird die Datei asynchron aufgerufen und das dann auch nur vom Internet Explorer selbst, denn andere Browser interpretieren behavior gar nicht. Der Pfad muss immer relativ zur HTML-Datei angegeben werden, da das Javascript im DOM des HTML arbeitet. Die Implementierung im Stylesheet sieht dann zum Beispiel so aus, wenn die HTML-Datei und die PIE.htc im selben Verzeichnis liegen:


#adventskalender {
	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
	}
#krippe {
	-moz-box-shadow: 6px 6px 12px #222222;
	-webkit-box-shadow: 6px 6px 12px #222222;
	box-shadow: 6px 6px 12px #222222;
}
#adventskalender, #krippe {
	behavior: url(PIE.htc);
	}

Den Aufruf der .htc-Datei hängt ihr einfach an den Block der CSS3-Anweisungen an. PIE reagiert nur auf die standard-konformen Angaben – Eigenschaften mit Vendor-Prefixes dürfen nie am Schluss des CSS3-Blocks stehen.
Der veranwortungsvolle Anwender von PIE sollte außerdem immer darauf achten, dass die Anzahl der Aufrufe der .htc-Datei so gering wie möglich gehalten wird und wirklich nur die unmittelbar betroffenen Elemente behandelt werden. Immerhin haben wir es hier mit einem Javascript zu tun, das den Explorer extrem ausbremsen wird.

Weil der IE nicht alle Werte beim Parsen von einigen CSS-Eigenschaften Preis gibt, muss für diese ein eigenes Präfix geschaffen werden. Für CSS3-Background-Eigenschaften zum Beispiel lautet das PIE-Präfix -pie-background: linear-gradient(#CCC, #EEE);.

CSS3 PIE verstehen und die Schwächen kennen

Um die simulierten CSS3-Eigenschaften zu rendern, erstellt das Javascript von PIE über das DOM einen Container (<css3-container/>). Dieses neue Element wird als Sibling (Schwestern-Element) vor dem Zielelement kreiert und mit position: absolute auf denselben Koordinaten und mit demselben z-index platziert. Da PIE die nicht unterstützten CSS3-Eigenschaften mit VML-Objekten nachzeichnet, werden diese in dem neuen Container untergebracht.

Aus dieser Vorgehensweise resultieren auch die meisten bekannten Probleme wie z. B. verschwundene Hintergründe, Border oder Schlagschatten. Das hängt mit der Tatsache zusammen, dass der generierte Container mit position: absolute hinter dem Zielcontainer mit position: static verschwindet. In diesem Fall müsst ihr dann den statischen in einen relativ positionierten Container umgewandeln und mit z-index: -1 nach hinten schieben. Wieder einmal wird position: relative zum Problemlöser des Internet Explorers.

Für CSS3-Background-Eigenschaften wendet ihr das oben beschriebene Präfix von PIE an. Sollen mehrere Hintergründe eingebunden werden (multiple backgrounds), muss der Pfad zu den Bildern immer relativ zur HTML-Datei angegeben werden.

Ein bekannter Bug tritt auf, wenn transparente Hintergründe in Tateinheit mit Schlagschatten verwendet werden. Der Schlagschatten wird von PIE nämlich auf den gesamten Hintergrund des Containers gelegt und scheint dann durch die transparente Fläche hindurch. In diesem Fall sollte sich der Webdesigner gegen PIE und für pures CSS3 mit einer Fallback-Lösung entscheiden – die Angabe einer blickdichten Hintergrundfarbe auf herkömmliche Weise, die von allen Browsern interpretiert wird. In diesem Beispiel in Verbindung mit Modernizr.js (vgl. die Klasse .rgba):


#adventskalender 	{
	background: #fff;
	-moz-box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
	-webkit-box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
	box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
	-moz-border-radius: 40px 10px 10px 10px;
	border-radius: 40px 10px 10px 10px;
	position: relative;
	}
.rgba #adventskalender {
	background: rgba(255, 255, 255, 0.5);
	}
#adventskalender {
	behavior: url(PIE.htc);
	}

Hier werden die CSS3-Angaben von den alten Browsern ignoriert und die Eigenschaft background: #fff; kommt zum Tragen. Die Lesbarkeit des Textes wäre gerettet.

PIE bringt neben den oben erwähnten noch ein paar bemerkenswerte zusätzliche Features mit:

-pie-watch-ancestors
Erkennt On-The-Fly-Änderungen an Objekten (z. B. durch JavaScript) und kann diese umsetzen.
PNG-Alpha-Transparenz
Rendert die Alpha-Transparenz von .png-Dateien im Internet Explorer 6. Sie wird ebenfalls einfach über das PIE.htc script initiiert. Macht die Verwendung anderer Alpha-Transparenz-Skripte überflüssig (z. B. DD_belatedPNG)
Lazy Initialization (-pie-lazy-init)
Gibt man Elementen die -pie-lazy-init:true; Eigenschaft, so werden sie zu Gunsten der Performance erst gerendert, wenn sie in den Viewport wandern.
Layout Polling (-pie-poll)
Mit -pie-poll:true; wird die Abfrage für Zustandsänderungen eines Elements erhöht, um so Rendering-Fehler durch Größen- und Positionsänderungen zu vermeiden.

CSS3 PIE Implementierungen

CSS3 PIE wird von dem CSS Authoring Framework Compass implementiert. Das Modul befindet sich aktuell noch in der Beta.

Zum Schluß noch ein Hinweis auf IE-CSS3

Eine Alternative zu PIE ist IE-CSS3 von Nick Fetchak. Dieses Skript arbeitet zwar ähnlich wie PIE – am Ende der CSS3-Deklarationen wird mit behavior: url(ie-css3.htc); die Datei aufgerufen – aber IE-CSS3 unterstützt zur Zeit nur border-radius, box-shadow und sogar zusätzlich text-shadow. Wer also nicht das volle Programm von PIE und/oder lediglich text-shadow benötigt, ist mit dieser Lösung sicher auch ganz gut beraten. Sie ist auf jeden Fall wesentlich schlanker.

comments powered by Disqus