Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

CSS3 PIE | Dekoratives mit und ohne CSS3

CSS3 PIE | Dekoratives mit und ohne CSS3

Mit Schlagschatten, runden Ecken und Verläufen können Webworker ihre Seiten durch einfache CSS3-Anweisungen hübscher gestalten. Doch es gibt immer noch alte Browser, die CSS3 nicht verstehen können, und den Internet Explorer, der es nicht verstehen will. Um nicht ganz auf die neuen Möglichkeiten verzichten zu müssen, haben sich Lösungen wie CSS3 PIE etabliert, die zumindest dem IE mit Javascript auf die Sprünge helfen können. Henry Zeitler zeigt, was hinter CSS3 PIE steckt.

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.

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.

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: CSS3 PIE

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

  • Border-Radius
  • Box-Shadow
  • Border-Image
  • Multiple Background Images
  • Linear-Gradient (gerade Verläufe) als Background Image

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:

  1. #adventskalender {
  2.   -moz-border-radius: 10px;
  3.   -webkit-border-radius: 10px;
  4.   border-radius: 10px;
  5.   }
  6. #krippe {
  7.   -moz-box-shadow: 6px 6px 12px #222222;
  8.   -webkit-box-shadow: 6px 6px 12px #222222;
  9.   box-shadow: 6px 6px 12px #222222;
  10.   }
  11. #adventskalender, #krippe {
  12.   behavior: url(PIE.htc);
  13.   }

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):

  1. #adventskalender    {
  2.   background: #fff;
  3.   -moz-box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
  4.   -webkit-box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
  5.   box-shadow: 5px 4px 4px rgba(0, 0, 0, .1);
  6.   -moz-border-radius: 40px 10px 10px 10px;
  7.   border-radius: 40px 10px 10px 10px;
  8.   position: relative;
  9.   }
  10. .rgba #adventskalender {
  11.   background: rgba(255, 255, 255, 0.5);
  12.   }
  13. #adventskalender {
  14.   behavior: url(PIE.htc);
  15.   }

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.

Kommentare

Huaba
am 19.12.2011 - 11:38

Funktioniert eigentlich super, wo CSS3pie noch Probleme hat, ist bei multiplen Hintergrundbildern, wenn die Seite im IE gezoomt wird. Das sieht dann immer etwas "zerstückelt" aus. Auch die Text-Shadows sehen etwas unsauber aus.

Permanenter Link

Oliver
am 19.12.2011 - 14:34

Ich bin dazu übergegangen, Internetseiten im IE 8 nur benutzbar zu halten. IE 6/7 sind „unsupported“, d. h. ich teste sie auch nicht mehr und der User bekommt eine dicke Warnmeldung bzw. Chrome Frame (siehe unten). Je mehr Leute meckern, weil die Lieblingsseite nicht mehr funktioniert, umso mehr Leute updaten auch oder gehen ihrer IT Abteilung auf die Nerven, dass sie endlich nen Browser haben wollen. :-)

Wer damit surfen will oder muss, soll es halt tun und sich nicht beschweren, wenn das Netz mies aussieht und/oder langsam ist. Alternativ kann man auch bedenkenlos Chrome Frame anbieten, da man ja keine Adminrechte mehr zur Installation braucht.

Permanenter Link

Andreas
am 19.12.2011 - 16:33

@Huaba: Arroganz der Webdesigner und zudem wenig Wissen über die Unternehmens-IT. Die setzen nicht zum Spaß auf IE 6, im Gegenteil, sie wissen genau, dass der IE6 Sicherheitsrisiken birgt. Und sorry, aber jeder Hinweis, man möge einen aktuelleren Browser benutzen weckt in mir den Wunsch, den Verantwortlichen eine Runde zu verprügeln, zumindest würde ich aber die entsprechende Seite nicht mehr aufsuchen. Manche Leute wissen nicht oder trauen sich nicht, einen neuen Browser zu installieren und die mit solchen Warnungen zu belästigen kommt bestenfalls als Hybris der Macher an frei nach dem Motto, die wollen mir vorschreiben, welche Progs ich einsetzen soll.

Permanenter Link
Henry Zeitler

Henry Zeitler (Autor)
am 19.12.2011 - 20:01

Lieber Andreas, ich finde einen Hinweis auf einen veralteten Browser überhaupt nicht arrogant. Arrogant wäre es doch eher eine Internetseite zu erstellen, die auf einem alten Browser erst gar nicht funktioniert, oder? Und gerade für Leute, die es nicht besser wissen oder sich nicht trauen einen modernen Browser zu installieren sind solche Hinweise doch besonders interessant...

Permanenter Link

Huaba
am 20.12.2011 - 10:00

@Andreas: der Kommentar mit dem Hinweis auf einen alten Browser kam nicht von mir :-)

Aber wir handeln hier auch ähnlich: alle Seiten funktionieren in den IEs 7 und 8, IE9 sollte genauso aussehen wie "gute Browser". IE6 Unterstützung gibt es nicht von Haus aus, sondern nur wenn es der Kunde ausdrücklich wünscht.
Ich habe selber einige Jahre in der IT verbracht und weiß, wie schwer in einem Unternehmen eine Umstellung des Browsers sein kann. Wir wechselten von IE6 auf IE8. Probleme macht hier immer hausintern genutzte Software, die nicht up2date ist und den alten IE benötigt.
Nachdem aber auch Google und sogar Microsoft diesen Browser nicht mehr supporten, sollte sich auch solche Firmen hinsetzen und ihre Hausaufgaben (auch wg. der Sicherheitslöcher) machen!

Permanenter Link

Michael
am 20.12.2011 - 13:19

Ich kann mich mit CSS3 Pie nicht so wirklich anfreunden. Zwar ist die Möglichkeit schon klasse, dass man die Features nachrüsten kann, aber man sollte sich überlegen, zu welchem Preis.
Mir ist schon des öfteren aufgefallen, dass gerade bei vielen Elementen auf einer Seite, welche alle mit CSS3Pie bearbeitet werden, der Browser schnell überfordert ist. Das kann zu einem spürbar langsamen Browser bis hin zum Absturz führen.

Nimmt man dann noch mit in die Rechnung, das Nutzer mit einem veralteten Browser auch nicht zwangsläufig den neusten Computer haben, sondern die Hardware mindestens älter ist als die nächst höhere Browser-Version, dann spricht das neben der ohnehin langsameren JavaScript-Engine auch nicht für die Nutzung von CSS3Pie.

Hat man nur wenige Elemente, mit welchen ein alter Browser in Zusammenhang mit CSS3Pie gut klar kommt, dann stellt sich wiederum die Frage, ob es sich für die wenigen Elemente überhaupt lohnt, CSS3 nachzurüsten.

Permanenter Link

Die Kommentare sind geschlossen.