• Freitag
  • 25. Juli 2008

CSS3: Stufenweise Verbesserung des Blog-Layouts

Was ist CSS3?

CSS3 bietet eine Menge neuer Wege für die Gestaltung von Webseiten. Deshalb wird es von vielen Webseitenentwicklern sehnsüchtig herbeigesehnt. Auch von mir!

Die Verabschiedung dieses Standards wird wohl leider noch einige Jahre auf sich warten lassen. Zudem bedarf es dessen Implementierung in den Browsern, der hinreichenden Verbreitung dieser Browser sowie der praktischen Einsatzes auf Webseiten, damit wir alle dessen Vorteile im Internet der Zukunft nutzen können.

Gleichwohl habe ich schon mal angefangen erste CSS3-Fähigkeiten (neudeutsch: Features) in einer eigenen CSS-Datei auf der Website www.dieter-welzel.de als auch in diesem Blog einzubauen. Dazu aber weiter unten mehr.

Was heißt stufenweise Verbesserung?

Stufenweise Verbesserung ist mein Übersetzungsversuch für eine Technik, die sich neudeutsch Progressive Enhancement nennt. Dabei geht es nach meinem Verständnis darum, je nach Fähigkeiten des jeweiligen Browsers CSS zur Gestaltung der Seite bereitzustellen. Für alte Browser wie den Internet Explorer 4 und Netscape 4.x bietet sich hierbei der Einsatz der @import-Anweisung an, damit diese entsprechende CSS-Dateien nicht einlesen. Hierüber berichtete ich bereits in meinem Beitrag “Alte Browser besser unterstützen“.

Solche Tricks sind beim Einsatz von CSS3 nicht nötig. Browser, die eine neue CSS3-Funktion noch nicht kennen bzw. unterstützen, ignorieren diese einfach.

Da CSS3 noch kein Standard ist, stellen die Browserhersteller den CSS3-Selektoren einen Vorspann voran. Beim Firefox ist dies beispielsweise -moz- und beim Safari -webkit- gefolgt von dem Selektor (siehe die entsprechende Info beim W3C). Da auch mit der Voreinstellung CSS-Level 3 CSS3-Selektoren mit solchen Vorspannen beim CSS-Validator des W3C nicht validieren, habe ich diese in eine eigene CSS-Datei mit dem sinnigen Namen css-3.css gepackt.  ;-)

Welche CSS3-Fähigkeiten habe ich eingebaut?

  1. Runde Ecken (neudeutsch: Rounded Corners) ohne die Klimmzüge bzw. Tricks, die man sonst im Markup bzw. mit Javascript anstellen muss.
  2. Gleiches gilt für den räumlichen Schatteneffekt (neudeutsch: shadow) bei Grafiken, Fotos und Rahmen von Containern etc.
  3. Und schließlich als Schmankerl gibt es auch einen Mehrfachschatten auf Text (neudeutsch: multiple shadow).

Zu diesen CSS3-Effekten im Einzelnen:

Runde Ecken

In der aktuellen CSS-Welt sind Container eckig. Um genau zu sein: Vierecke. Runde Ecken sind bisher nur mit Grafiken und Tricks zu realisieren. Da es aber hierbei um optische Gestaltung einer Website geht, ist hierfür CSS zuständig und müsste es auch können. CSS3 bringt dazu den neuen Selektor border-radius. Unterstützt wird er bereits von Browsern wie dem Firefox 2 und 3 sowie dem Safari 3. Bisher nicht dargestellt auf diesem Wege werden runde Ecken vom Internet Explorer und Opera.

Screenshot meiner Startseite mit runden Ecken im Firefox 3

Räumlicher Schatteneffekt

Dieser Effekt muss bislang ebenfalls mit zusätzlichem Markup im HTML-Code bzw. Javascript realisiert werden. CSS3 schafft mit dem neuen Selektor box-shadow Abhilfe. Allerdings beherrschen diesen Gestaltungseffekt zur Zeit lediglich auf dem Webkit basierende Browser wie der Safari.

Screenshot meiner Startseite mit räumlichem Schatten im Safari 3.1

Mehrfachschatten

Zur Abwechselung funktioniert dieser CSS-Effekt derzeit bei meinen Browsern nur mit dem Opera. Dazu wird der CSS-Selektor text-shadow mehrfach angewandt.

Screenshot von meiner Startseite mit mehrfachem Schatten im Opera 9.5

Und wie geht es weiter?

Ich hoffe in großen Schritten.

Zum einem wünsche ich mir, dass möglichst bald viele CSS3-Selektoren von vielen Browsern unterstützt werden. Für Ende 2008 bzw. Anfang 2009 soll der Firefox 3.1 fertig sein, der dann in Sachen CSS3-Unterstützung einen großen Schritt nach vorne machen soll. Inwieweit Microsoft dem Internet Explorer 8, der ebenfalls in dieser Zeit fertig werden soll, noch CSS3-Features spendiert, wird sich zeigen müssen. Die diesbezüglichen Fähigkeiten der anderen Browser der Mozilla- und Webkit-Familie setzen jedenfalls den Riesen aus Redmont diesbezüglich ganz schön unter Druck. Es bleibt also spannend! :-)

Zum anderen sehne ich eine möglichst baldige Verabschiedung der CSS3-Module durch das W3C herbei. Die meisten vorgesehenen CSS3-Neuerungen stellen echte Erleichterungen für den geplagten Webseitenentwickler dar.

Ich beabsichtige jedenfalls weitere CSS3-Features zu testen und gegebenenfalls auf der Webseite und dem Blog einzubauen. Zum Schluss noch ein paar Links zum Thema CSS3 für Interessierte.

Linkempfehlungen zu CSS3

Nachtrag: Auf die Idee CSS3 auf meiner Website und diesem Blog schon jetzt einzusetzen hat mich Datenkind gebracht (siehe seinen Kommentar sowie den von mir eröffneten Thread im XHTML-Forum). Herzlichen Dank für diesen Gedankenanstoß!

Das könnte Dich auch interessieren:

Aktualisiert am 5. August 2008
Stichworte: Browser, CSS3, Firefox, Internet Explorer, Opera, Safari
Kategorie Webseiten, WordPress

↑ ↓

2 Kommentare»»

  1. Progressive Enhancement ::: CSS 3 einerseits jedoch IE 6 andererseits » miradlo bloggt – #

    Pingback vom 11. November 2008, 00:09 Uhr

    [...] Progressive Enhancement? im Deutschen könnte man stufenweise Verbesserung oder Erweiterung des Layouts dazu sagen. Hinter diesem Begriff verbirgt sich ein Konzept sich beim Design nicht mehr an den ältesten Browsern zu orientieren und nur zu nutzen, was auch diese umsetzen, sondern Stück für Stück auch kleine Extras für moderne Browser einzubauen. Einen guten Artikel mit Beispielen dazu gibts bei Dieter. [...]

  2. Jannis Gerlinger – #

    Kommentar vom 01. Februar 2010, 11:02 Uhr

    Schönes Beispiel. Bin auch gespannt wann css3 endlich kommt.

Schreibe einen Kommentar



↑ ↓