CSS3 – Es kann los gehen

März 8th, 2011 | Tags: , , , , ,
Anzeige

CSS3 ist die neuste Version der “deklarative Stylesheet-Sprache” Cascading Style Sheets. Mit ihr kommen viele neue Gestaltungsmöglichkeiten frei Haus, die sonst nur umständlich mit einigen Tricks umgesetzt werden konnten. Doch wie sollte es anders sein, die Browserhersteller konnten sich scheinbar wieder nicht einigen und somit gibt es auch weiterhin viele Insellösungen.

Mit CSS3 sollte vieles besser und einiges einfacher werden. Meiner Meinung nach geprägt von den Gestaltungen von so genannten Web2.0 Seiten hat sich auch einiges getan. Das Web könnte in Zukunft runder, schattiger und generell etwas weicher werden. Geschmackssache, keine Frage. Aber die Möglichkeit zu haben ist schon mal unschlagbar.

Endlich abgerundete Ecken für Elemente verwenden ohne Grafiken einbauen zu müssen. Schatten von Hause aus verwenden zu können, Farbverläufe direkt mit CSS umsetzen zu können und vieles mehr. CSS3 bietet viele Neuerungen die dem geneigten Webentwickler glücklich machen.

Insel-Tags bleiben

Schon so lange ich mit HTML und CSS arbeite, und sicher auch darüber hinaus, gibt es keine einheitliche Lösung für ein Problem. Die verschiedenen Browserhersteller kochen doch fast ihr eigenes Süppchen.

Liste der gängigsten Browser und Versionsnummer ab wann sie CSS3 unterstützen sollen.

  • Mozilla – Firefox (Version 3.6)
  • Microsoft – Internet Explorer (Version 9)
  • Google – Chrome (Version 9)
  • Apple – Safari (Version 5)

Interessanterweise benutzen Safari und Chrome beide die WebKit HTML-Rendering-Bibliothek und haben dennoch Unterschiede beim Aufruf einiger CSS-Elemente.
Warum es die Browserhersteller nicht schaffen den W3C Standard einzuhalten.

Beispiele für besondere Behandlung von Browsern

Ein Einfaches Beispiel zeigt wie unterschiedlich die Browser beim anzeigen von ein und dem selben Efekt sind.

border-radius in CSS3

  • Firefox
    -moz-border-radius-topleft
    -moz-border-radius-topright
    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft
  • Safari
    -webkit-border-top-left-radius
    -webkit-border-top-right-radius
    -webkit-border-bottom-right-radius
    -webkit-border-bottom-left-radius
  • W3C Standard, Opera, Internet Explorer, Chrome
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius

Daraus resultiert, dass wenn ein Webentwickler vernünftiges CSS erstellen will und vier unterschiedliche Ecken haben will muss er/sie um alle Browser abzudecken mind. 12 Zeilen Code schreiben. Dabei sollten doch die vier vom W3C reichen.

Und das geht kann man mit CSS3 unter anderem machen.

Eine recht interessante und aktuelle Informationsquelle rund um das Thema CSS3 ist css3.info. Die wichtigsten neuen Möglichkeiten zur Gestaltung sind.

Das sind nur ein paar, aber meiner Meinung nach die interessantesten Änderungen zu diesem Thema.

Was noch bleibt

Für mich bleibt immer noch die trauer, dass man diese tollen Effekte nur bedingt nutzen kann. Schuld sind leider die Leute, die immer noch mit unaktuellen Browsern wie dem Internet Explorer 6/7 unterwegs sind. Man kann sich fast unendlich viel mühe geben Sachen für alle Browser gleich umzusetzen doch dann kommen die Oldtimer mit der mangelnden Unterstützung.

Als weiteren Lesestoff empfehle ich das Buch CSS3 For Web Designers von Dan Cederholm. Leider nicht bei Amazon (.de|.com) erhältlich kostet es in der Printversion 18 USD + Versand. Und wenn man dabei ist empfehle ich auch das Buch HTML5 For Web Designers. Beides zusammen im Bundle für 30 USD + Versand.

Als Quelle für die Beispiele hier habe ich die sehr empfehlenswerte CSS3-Seite www.css3files.com verwendet.

Habt ihr schon mit CSS3 oder gar HTML5 gearbeitet und schon Erfahrungen besonders mit den verschiedenen Browsern gesammelt? Mich würden eure Erfahrungen und Meinungen interessieren.

Weiter lesen


  1. März 8th, 2011 at 13:32

    Guter Artikel. Tatsächlich nutze ich bereits CSS3 (und auch HTML5), sofern es mir passt. Soll heißen, wenn ich einen bestimmten Effekt erzielen möchte, der gestalterisch wichtig ist (oder den ich einfach mag). Und dabei nehme ich dann bewusst in Kauf, dass er in älteren Browsern nicht angezeigt wird. Ich finde, es ist wichtig keine entscheidenden Funktionalitäten oder Inhalte so darzustellen. Wenn es sich jedoch lediglich um kosmetische Dinge handelt, find ich das i.O.

    Ein (zugegeben sehr simples) Beispiel wäre ein Navigationsmenu. Für CSS3 fähige Browser könnte man dieses über Translation und Transformation sehr schön animieren. Der Rest erhält dann lediglich das Endergebnis, ohne Animation.

Kommentieren