Startseite > Blog > CSS3: Stufenweise Verbesserung des Blog-Layouts

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ß!

5 Kommentare

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

  2. Klaus sagt:

    Das mit den runden Ecken und dem Schatteneffekt habe ich in den letzten Tagen auf meiner Website auch realisiert. Im Firefox sieht es gut aus und der IE stellt halt die runden Ecken gerade dar. Passt aber trotzdem.

    Als nächstes wollte ich bei meinem Menue den Farbverlauf der Buttons mit CSS realisieren.

    Herzliche Grüße
    Klaus

    • Dieter sagt:

      Der Blogbeitrag von mir ist fast drei Jahre alt. Derzeit beherrschen erfreulicherweise die aktuellen Browserversionen schon deutlich mehr CSS3 als damals. So kann der Internet Explorer 9 runde Ecken und räumlichen Schatteneffekt. Der Opera 11.1, Firefox 4.01, Google Chrome 11 und Safari 5.0.5 alle drei Effekte.

      Farbverläufe mittels CSS statt Grafiken setze ich übrigens seit dem Relaunch Ende letzten Jahres auch hier ein.

      Fazit: Der Internet Explorer ist immer noch „Bummelletzter“, aber erste CSS3-Effekte werden endlich auch von diesem „Drecksbrowser“ unterstützt.

  3. Klaus sagt:

    Ich habe gestern mein Menü auf Farbverlauf umgestellt und es hat alles wunderbar funktioniert.
    Der Riesenvorteil ist nun, dass ich in Zukunft sehr schnell die Farben ändern und direkt testen kann.
    Ich bin begeistert!

    Herzliche Grüße
    Klaus

    • Dieter sagt:

      Hallo Klaus,

      weitere Vorteile sind weniger http-Requests und weniger Datenübertragungsvolumen für die Darstellung der Webseite im Browser.

      Herzliche Grüße zurück
      Dieter

1 Ping

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

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Webseite veröffentlicht am Freitag, den 25. Juli 2008, um 22:57 Uhr,
zuletzt geändert am Sonntag, den 30. Dezember 2012, um 20:53 Uhr.
Tags: , , , , ,


Statistik: 71 Seiten, 346 Blogartikel, 1.069 Schlagworte, 1.311 Kommentare.
© 2002 - 2016 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben. 
Diese Website setzt Cookies ein (Datenschutz). Wenn Du diese Website weiterhin besuchst, erklärst Du Dich mit deren Verwendung einverstanden.

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen