accessBlog:

24 Jul 2009

Wochenendbeilage:
Neues vom W3C und was mit CSS 3

Die CSS-Arbeitsgruppe des W3C hat eine ganze Reihe neuer Entwürfe für Module der kommenden CSS 3-Spezifikation vorgestellt. Ganz frisch am Start sind Flexible Box Layout Module und CSS Image Values Module, beide vom 23. Juli und beide erscheinen uns beim ersten Drüberlesen sehr sinnvoll zu sein. Besonders flexbox hat es uns angetan, weil es mit sehr einfachen Regeln ermöglicht, eine Menge HTML- und CSS-Hacks zu ersparen:

»In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ›flex‹ to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.«

Bereits beim Status eines Last Call angelangt ist Ende letzten Monats der Entwurf des CSS 3-Moduls Multi-column layout, das, wie der Name schon sagt, wirklich echte mehrspaltige Layouts ermöglicht. Hier bittet die Arbeitsgruppe um Kommentare bis zum 01. Oktober diesen Jahres.

Wir hatten neulich schon mal etwas mit Multi-column layout herumgespielt und siehe da: es funktioniert sogar in modernen Browsern wie Safari 4, Google Chrome 2 oder Firefox 3.5 3.0. Zum selber ausprobieren: die Liste im Kasten »mehr zum wettbewerb:« ganz unten auf einfach-fuer-alle.de/biene-2009 basiert auf einer simplen Mehrspalten-Anordnung mit reinem CSS ohne jegliche Eingriffe ins HTML.

Weiterlesen …

Einige weitere Entwürfe aus der letzten Zeit:

• CSS Fonts Module, W3C Working Draft vom 18. Juni 2009;
• CSS 3D Transforms Module, W3C Working Draft vom 20. März 2009;
• CSS 2D Transforms Module, W3C Working Draft vom 20. März 2009;
• CSS Transitions Module, W3C Working Draft vom 20. März 2009;
• CSS Animations Module, W3C Working Draft vom 20. März 2009.

Die letzten vier basieren allesamt auf Vorschlägen von Apple und funktionieren teilweise schon in aktuellen Versionen der Webkit-Engine, sind aber sicher noch nicht für den Produktiveinsatz geeignet. Und sie sind auch nicht ganz unumstritten: OK, dass von Flash-Hersteller Adobe Einwände gegen zu viel Animationen in CSS kommen mussten war vorhersehbar, aber die Frage bleibt doch, wo die Präsentations-Ebene aufhört und wo die Ebene des Verhaltens von Elementen anfängt und ob man da nicht etwas vermischt, was besser getrennt bleiben sollte.

Andererseits gibt es neben fundamentalen Fehlern noch eine Menge Löcher in den CSS-Spezifikationen aller Versionsnummern, die es zu stopfen gilt. Eine ganze Reihe von Wünschen aus der Community hatten sich schon im vergangenen Jahr aus dem WaSP Community CSS3 Feedback 2008 ergeben, wie zum Beispiel die Möglichkeit, Selektoren zu gruppieren (hier die Erklärung bei Eric Meyer) oder ein wirkliches Layout-System, dass diesen Namen auch verdient.

Und das eigentliche Problem – dass sich die CSS-Arbeitsgruppe mit geradezu Gletscher-artiger Geschwindigkeit zu bewegen scheint – ist damit auch noch nicht behoben. Zum Vergleich hier eine Liste der aktuellen CSS 3-Module mit ihrem letzten Aktualisierungs-Datum: CSS3 Module Status bei CSS3.Info – da sind schon ein paar Dinge drin, die Web-Entwickler dringend bräuchten, die aber teilweise seit 2002 (!) niemand mehr angefasst hat.

Was geht?

Gut dass zumindest ein Teil der Browser-Hersteller da etwas schneller ist und Teile der Spezifikation schon fleißig implementiert. Wenn man sich von dem Mantra verabschiedet, dass Webseiten in allen Browsern 100%ig gleich aussehen müssen (müssen sie das?), dann kann man schon vieles davon verwenden, wie die folgenden Tutorials zeigen (teilweise schon was älter, aber immer noch gut):

• »Vier CSS3-Tricks für sauberes HTML« von den Webkrauts
• »RGBa Browser Support« bei CSS-Tricks.com
• »ZURB – Super Awesome Buttons with CSS3 and RGBA« von Mark Otto
• »Schönes neues CSS: box-shadow« bei Peter Kröner
• »Fun with WebKit css gradients« im Martini Lab Blog (ein passendes Tool zum Erstellen von Linear Gradients gibt es von John Allsopp)
• »The Power of HTML 5 and CSS 3« bei Perishable Press

Wenn das noch nicht reicht: hier ist eine der zurzeit ach so beliebten Top-irgendwas-Listen: »CSS3 Exciting Functions and Features: 30+ Useful Tutorials«