CSS3 Funktionen heute schon nutzen

TRITUM /

Tolle neue Funktionen

Die CSS3-Spezifikation existiert es ja nun schon ein paar Jahre, auch wenn es (noch) kein Standard ist. Mit CSS3 werden für Webdesigner Träume wahr. Denn damit lassen sich bestimmte Designanforderungen sehr einfach umsetzen, die bisher teils nur mit großem Aufwand zu realisieren waren. Die folgenden neuen Funktionen haben für uns die größte Arbeitserleichterung:

  • Hintergrundverläufe: Konnten bisher nur mit Bildern umgesetzt werden.
  • Schatteneffekte: Wenn die Box von der Größe her variabel sein sollte, waren diese nur mit einem komplizierten DIV-Konstrukt und mehreren Hintergrundbildern zu realisieren.
  • Runde Ecken: Konnten bisher nur mit Hintergrundbildern realisiert werden, wenn die Größe des Containers variabel sein sollte.

Bei Inhalten, die dynamisch generiert werden (z.B. Bilder in Texten, die Redakteure mithilfe eines CMS pflegen), konnte man bisher nur Effekte wie Schatten oder runde Ecken realisieren, wenn das CMS bestimmte Funktionen zur Bildbearbeitung (Image Magick, GDLib etc.) bietet. Dazu kam, dass bei einer Layoutänderung wieder relativ hoher Aufwand mit der Anpassung der Hintergrundbilder entstand.

Browserkompatibilität bei CSS3

Verschiedene Browser unterstützen bestimmte CSS3-Funktionen heute schon, auch wenn es noch kein offizieller Standard ist. Firefox unterstützt die runden Ecken ab Version 2 und die anderen genannten Funktionen ab Version 3.6. Safari unterstützt nahezu alle CSS3-Funktionen bereits ab Version 3. Opera unterstützt viele Funktionen bereits ab Version 10. Die abgerundeten Ecken allerdings erst ab Version 11.

Nur der Internet Explorer (IE) unterstützt die CSS3-Funktionen erst ab der neusten Version 9 (war ja klar ;-)). Da aber die vorherigen Versionen immer noch sehr viel in Verwendung sind, war der Einsatz von CSS3 für uns bisher keine Alternative.

Kleine Helferlein für CSS3 auch im IE

Für ein aktuelles Projekt wollten wir aber trotzdem die genannten CSS3-Funktionen nutzen, da der Aufwand mit den bisherigen Werkzeugen sehr hoch gewesen wäre. Also haben wir einmal recherchiert, was sich so auf dem Markt der CSS3-Kompatibilität getan hat. Denn es gibt durchaus Ansätze, die auch dem IE beibringen (wollen), mit CSS3 umzugehen. Ausprobiert haben wir z.B.:

PIE - Die Lösung?!

Allerdings haben uns die genannten Skripte leider alle nicht ausgereicht bzw. haben nicht funktioniert bis wir auf CSS3 Pie gestoßen sind. Mit dieser Lösung können auch in komplexeren Layouts runde Ecken (sogar jede Ecke einzeln) definiert, Schatteneffekte (Länge und Farbei ist bestimmbar) angegeben und Hintergrundverläufe (Richtung des Verlaufs ebenfalls definierbar) eingestellt werden.

Um CSS3 Pie nutzen zu können, ist in den betroffenen Elementen lediglich per CSS eine sogenannte htc-Datei einzubinden. Die Eigenschaften werden ganz normal im CSS definiert und die hts-Datei sorgt dafür, dass auch der IE diese Eigenschaften versteht. Ohne die Datei würden die CSS3-Eigenschaften vom IE einfach ignoriert.

Bis jetzt sind wir bei TRITUM sehr begeistert von dieser Lösung, da sie bisher robust erscheint und ein umfangreiches Funktionsspektrum für die genannten Features bietet.

Achtung - Stolperfallen!

Wer CSS3 PIE ausprobiert und bei wem es nicht funktioniert, dem seien die Known Issues ans Herz gelegt. Wir sind beispielsweise bei der Implementierung über die Punkte gestolpert, dass man dem Webserver manchmal den Dateitypen erst noch bekannt machen muss und dass Elemente die Position-Eigenschaft benötigen.

Sicher ist diese Lösung nicht für jeden Einsatz geeignet, da dennoch bestimmte Browserversionen für bestimmte Funktionen ausgeschlossen werden. Vor der Entscheidung sollte also ein kritischer Blick auf die Zielgruppe und in eventuell schon vorhandene Statistiken geworfen werden. Wer sich dennoch für den Einsatz entscheidet, dem wünschen wir viel Spaß beim Ausprobieren von CSS3. Wir werden die Robustheit beim Einsatz in zukünftigen Projekten prüfen und berichten!