Man kann das ganze heute schon realisieren. Wenn auch nur mit Extra-Klimmzügen, will man es crossbrowser-mäßig heute schon einsetzen.

Webdesigntrends sind Frühjahr für Frühjahr ein beliebtes Thema. Nie waren wir hipper als dieses Jahr und verkürzen uns so die Wartezeit bis zum noch besseren kommenden Jahr.

So war u.a. der Spaltensatz in CSS3 Thema im Artikel Web Design Trends for 2010.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

In den meisten Fällen war es bisher aber so, dass mir die Sache das Lesen enorm erschwert hat. Grund hierfür ist der unreflexierte Einsatz. Effekthascherei wird auch mit CSS3 fehl am Platz sein. Lesbarkeit ist ein wichtiges Gut. Auch in modernen Zeiten und eigentlich mindestens schon so lange es Print (-design) gibt ;-)

Droht der Spaltensatz zur neuen Mikroskopschrift zu werden?

Using several columns allows you to fit more content in the same space.

So einfach kann es eigentlich nicht sein. Zumindest, wenn man sich die Problem- und Fragestellungen in zahlreichen Foren etc. ansieht. Oft offenbare diese eben ein mangelndes Verständnis der Grundlagen. Gerade im Bezug auf CSS.

In zwei Artikeln wurde u.a. auch darauf eingegangen.

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.Everything you Know about Clearfix is Wrong

Often when designers try to explain a particular feature of CSS to each other, they get a few things wrong.8 Common CSS Mistakes and How to Fix Them

In einem Bewerbergespräch hatte ich mal das Vergnügen mit einem Erwachsenen. Zwei Fragen haben ausgereicht aufzuzeigen, wie einfach HTML & CSS sind – nicht ;-)

Da muss man durch: Grundregeln und Spezifikationen

Grundlagenartikel, die mir selbst geholfen haben, habe ich vor ein paar Jahren mal übersetzt: Block vs. Inline und Vererbung und Kaskaden. Es werden zentrale Grundkonzepte von CSS beschrieben. Mit diesem Grundlagenwissen lässt sich so manchem CSS-Problem vorbeugen.

Als Dauerbrenner immer zu empfehlen, ist die Einführung von Michael Jendryschik: Einführung in XHTML, CSS und Webdesign.

Es kann auch nicht schaden, sich mal durch die kompletten Spezifikationen zu wühlen. Zumindest bei Verständnisproblemen mal darauf zurückzugreifen. Also ran an die Specs: (X)HTML & CSS (W3C).

Zugegeben machen Spezifikationen und Grundregeln nicht alle Kinder froh. Wer aber fleißig ist, wird als Erwachsener mehr Spaß haben.

Ich beantworte daher die Frage eines Lesers hier im Blog.

Was ist der Vorteil von CSS3 – Welche Browser unterstützen das zur Zeit?

Vorteile von CSS3

Gegenüber was? Wir sprechen eher über Neuerungen und Weiterentwicklungen, die uns zum einen das Leben als Webdesigner erleichtern, aber v.a. auch neue Möglichkeiten eröffnen. Im Prinzip stehen die Vorteile im Vordergrund (gibt es Nachteile?), die sich aus erweiterten Gestaltungsmöglichkeiten (Bsp. @font-face, Spaltensatz etc.) und Möglichkeiten hin zu effizienterem Code (Bsp. border-radius) zusammensetzen.

Browserunterstützung

Diese Frage kann man sich am besten durch übersichtliche Checklisten beantworten lassen. So z.B. Web Designers’ Browser Support Checklist oder etwas gezielter bei When can I use…

Man kann sich auch fragen What Does “Support” Mean?

Es kommt v.a noch darauf an

Wie oben erwähnt spricht, trotz der noch nicht vollzogenen Etablierung von CSS3, nichts gegen einen Einsatz bereits heute verfügbarer Techniken. Ob man heute schon CSS3 Eigenschaften verwendet, hängt von den eigenen Anforderungen und Ansprüchen sowie konkreten Kundenanforderungen ab. Auch hier muss wieder das Beispiel der abgerundeten Ecken (border-radius) herhalten.

Möchte ich runde Ecken haben, schreibe ich eine Zeile mehr Code und zack wird alles abgerundet. Das spart im Vergleich zu bisher viele Zeilen Code und Schneidearbeiten in Photoshop. Aber natürlich muss man heute noch Abstriche machen. Bei vielen Webseiten ist es so, dass die meisten Besucher nichts davon sehen werden. Auch hier ist der Browsersupport noch nicht flächendecken vorhanden. Man hat dann im Wesentlichen zwei Möglichkeiten:

Verzicht auf das Feature bzw. Stilelement: Ich lasse es ganz bleiben. Durch den Verzicht bekommen dann alle Besucher das Gleiche zu sehen. Aber muss das sein? Ich denke nein.

Der Vergleich zu Fernsehgeräten ist nicht von ganz weit hergeholt.

Some viewers still have black-and-white televisions. Broadcasting only in black-andwhite—the “lowest common denominator” approach—ensures a shared experience but benefits no one. Excluding the black-and-white television owners—the “you must be this tall to ride” approach—provides no benefit either.

Verzichtet die Unterhaltungselektronikindustrie auf Dolby-Surround oder digitales Fernsehen, nur weil es noch alte Geräte gibt, die damit nichts anfangen können. Nein. Natürlich nicht, aber eben ohne den Zuschauern etwas Wesentliches vorzuenthalten. Originäres Bild und Ton sind trotzdem für alle verfügbar.

Progressive Enhancement: Warum also nicht neue Techniken heute schon nutzen, wenn sie zur Verfügung stehen? Hier setzt das Prinzip des Progressive Enhancement an. Um das zu verdeutlichen, wieder zurück zum einfachen Beispiel der abgerundeten Ecken.

Als Webdesigner entscheidet man sich dafür, die Ecken von Boxen abgerundet darzustellen. Also schreibt man eine zusätzliche Zeile CSS-Code. Browser, die das bereits heute unterstützen, rendern entsprechend Boxen mit abgerundeten Ecken. Andere, die es noch nicht unterstützen, ignorieren die Anweisung und stellen das Ganze eckig dar. Das tut niemandem weh. Keiner verpasst was, außer vielleicht einen fancy Effekt bzw. Stilelement.

Aber: Nun könnte es sein, dass ich allen meinen Besuchern Boxen mit abgerundeten Ecken präsentieren möchte.Oder ein Kunde besteht ganz einfach darauf, weil er dem Prinzip des Progressive Enhancement nicht folgen möchte.

Tja dann gibt es auch Mittel und Wege. Mehr Schmerzen natürlich auch. Es sind dann ein paar mehr Zeilen Code und Bildbearbeitung notwendig. Oder man versucht das Ganze mit Hilfe von Javascript zu realisieren. Wobei sich mit JS auch keine 100% Abdeckung erreichen lässt (manche Nutzer haben JS deaktiviert). Aber runde Ecken sind zugegeben ein relativ kleines Problem. Im Falle vom Spaltensatz sprechen wir z.B. dann von noch weitreichenderen Fragestellungen und Workarounds.

Ähnlich verhält es sich auch mit anderen neuen Möglichkeiten in Richtung CSS3. Im Endeffekt muss man sich selbst entscheiden, wieviel einem der größere Aufwand wert ist, oder aber auch, die Anforderungen der Kunden beantworten diese Frage von ganz alleine.

Weitere Links zum Thema

• Progressive Enhancement: Die Zeit ist gekommen
• We’re Ready for CSS3, but are we Ready for CSS3?
• CSS3 + Progressive Enhancement = Smart Design
• CSS3 – Vor dem Endspurt? (eigene Einschätzung im Webzeugkoffer)

Man kann aber nach wie vor noch nicht daran glauben, in naher Zukunft schon problemlos die neuen Techniken anwenden zu können. Schon vor drei Jahren und länger war CSS3 ein konkretes Thema. Wie dieser bereits über drei Jahre alte Artikel stellvertretend zeigt: CSS3 – Alles wird gut?

Allerdings sind wir von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird. Vielleicht sehe ich den kommenden Weg aber auch einfach zu pessimistisch. In diesem Punkt würde ich mich jedenfalls gerne irren.Dirk Jesse im Webkrauts-Artikel

Aber lohnt sich der Aufwand überhaupt?

Es soll sie ja geben, die Internetausdrucker. Wobei dieser Begriff eher in einem anderen Zusammenhang benutzt wird ;-)

Aber im Ernst. Hin und wieder werden v.a. auch längere Artikel ausgedruckt. Der Frage, ob das auch schon mal einer meiner Leser getan hat, bin ich bisher noch nicht nachgegangen. Sollte sich jemand finden, kann er/sie sich dann per Kommentar zu diesem Beitrag melden. Dann werde ich das Thema u.U. noch weiter vertiefen.

Zur Auffrischung: Print-CSS leicht gemacht

Wie’s am einfachsten geht zeigt Jens Meiert: Druck-Stylesheets: Die absolute Grundlage

Außerdem noch drei weitere Quellen zum Thema – das vielleicht schon gar keines mehr ist?

• Grundlagen Druck-Stylesheets (Peter Rozek)
• Ruck zuck zum Druck (Manuel Bieh)
• Handy Tips for Creating a Print CSS Stylesheet

Dann noch einer von mir aus dem Jahr 2006: Drucken von Webseiten – State of the Art

Und ein wenig Inspiration gibt’s seit neustem unter printFancy.com.

• Was Sie über CSS-Frameworks wissen sollten! – Grundlegendes zu Vor- und Nachteilen
• Warum CSS-Frameworks (für mich) keinen Sinn machen: Davids persönliche Sicht

Dirks Grundlagenartikel sollte man lesen, egal ob man eher auf fertige Frameworks setzt oder nicht (Grundlagen Webdesign). Aber auch die Argumentation im zweiten Artikel ist nachvollziehbar.

Ich selbst verwende auch keine Frameworks. Meine Beweggründe sind ähnlich denen, die David aufführt. Das ist allerdings nicht als grundlegende Ablehnung zu verstehen. In vielen Fällen sind Frameworks extrem hilfreich.

Lerneffekt

Der Webmaster unseres Entwicklernetzwerks (Developer Network) ist kein ausgewiesener CSS Guru. Er baut nicht ständig neue Websites oder schraubt an bestehenden rum. Hatte aber eben den Auftrag, eine Website zu bauen. Also nutze er YAML für Typo3, um darauf basierend die Collaboration Plattform zu entwickeln. Er profitierte, als eher administrierender Webmaster stark von der Vorlage des Frameworks. Dazu noch ein paar Nachhilfestunden ;-) und schon flutschte es.

Genau hier sehe auch ich die meisten Vorteile, die für einen Einsatz eines Frameworks sprechen. Eine solide, ausgereifte und in gängigen Browsern funktionsfähige Basis. Für die Anpassung an eigene Bedürfnisse bis hin zu Neuentwicklungen.

Persönliche Vorlieben

Wie David auch, baue ich Websites am liebsten von Grund auf neu. Ich baue nicht ständig selbst neue Websites. Weswegen ich mir bisher nur ein sehr rudimentäres Pseudoframework selbst erstellt habe, das diese Bezeichnung auch eher nicht verdient. Eine fast leeren HTML- und eine ebenso fast blanke CSS-Datei, die ich immer wieder auf’s Neue verwende. Mir reicht das auch und ich bin deswegen nicht langsamer.

Und wenn man ein Framework nutzen möchte, sollte man sich unbedingt Dirks YAML näher ansehen ;-)

Und auch wenn sich vielleicht im Laufe der Jahre, der ein oder andere Flirt ergibt, bleiben wir doch alle stark, oder? Ein Flirt ist es nicht wert.

Daher nochmal zur Erinnerung die Serie “Falling in Love with CSS“, die vor einiger Zeit schon auf Vorsprung durch Webstandards erschien.

She’s the beauty and the sun in the sometimes greyer everyday life of coding.Aus meiner damaligen Liebeserklärung

Es begann mit der Abhandlung Why CSS should not be used for layout. Weiter mit vielen Kommentaren im Blog unter dem gleich lautenden Titel Why CSS should not be used for layout. Immer daran denken: Nicht zu Hause nachmachen. Mit Tabellen spielen ist gefährlich.

Gefolgt von zwei weiteren Beiträgen. CSS and the meaning of life und On the semantics of HTML.

Die Hitze der Diskussion reicht aus, um die paar Tage bis zum Frühling zu heizen.

Via CSS for Layout. Another Rant

Es wäre nur eine Zeile CSS-Code mehr. Ohne diese CSS-Eigenschaft hat das teils sehr viel mehr Arbeit und HTML- und CSS-Code zur Folge.

Aber man unternimmt weitere Anstrengungen, wie den Aussagen der IE-Leute zu entnehmen ist. Die Highlights des Transkripts hat Michael Galore (Wired) unter More Details About IE8, Web Standards and Performance zusammengefasst.

But those Frameworks do too much! What I need is a really small set of files and folders for getting started my projects really quickly – a kick-start for static web development. So this is my first approach to do so.

Kurzum hat er sein eigenes Mini-Framework entwickelt und bietet es zum Download an.

HTML/CSS/JS-Kickstart beinhaltet eine Reihe bewährter Konzepte, wie z.B. Eric Meyers CSS-Reset. Der Ansatz an sich ist sehr sinnvoll. Ob es genau dieses Paket sein soll, muss jeder für sich entscheiden.

CSS3 wird viele Neuerungen und auch Verbesserungen mit sich bringen. Dinge, auf die wir Webdesigner schon lange sehnsüchtig warten. Sehr lange. So z.B. auf das Multi-Column Layout. Seit Jahren kann man über CSS3 lesen und auch damit experimentieren. Vom produktiven Einsatz scheinen wir aber immer noch weit entfernt. Einen konkreteren Ausblick bot bereits vor ziemlich genau zwei Jahren Dirk Jesse, in einem Artikel auf webkrauts.de: CSS3 – Alles wird gut?

Dieses Jahr liegt CSS3 also auch nicht unter dem Christbaum. 2009 darf wohl auch bezweifelt werden. So schön die Aussicht auf die neuen Möglichkeiten auch sein mag. Es zieht sich schleppend hin. Im Extremfall droht CSS3 zu veralten, bevor es implementiert ist.

Laaaangsaaaam

Langsam wird’s mal Zeit. Den Entwurf zu CSS3 gibt es bereits seit 2001(!). Hier darf die Frage erlaubt sein, ob das Neue was da kommt, nicht schon veraltet ist, bevor es da ist. Ob sich in der Zwischenzeit nicht neue Anforderungen und Begehrlichkeiten ergeben haben und weiter ergeben werden, die in weiteren Entwicklungen wieder vor uns Webdesignern hergetragen werden.

Natürlich haben die Browserhersteller einen nicht ganz unwesentlichen Anteil an diesem Umstand. Allen voran der blaue Riese aus dem Hause MS. Die Kombination seiner starken Verbreitung gepaart mit fehlender Unterstützung grundlegender CSS2.1 Eigenschaften bzw. Möglichkeiten, bremste die Entwicklung. Eric Meyer nennt diese Zeit das “IEnterregnum”.

We had a great big long pause in CSS advancement in the first half of this decade– I call it “the IEnterregnum”– and it’s only been recently that we’ve seen browsers pushing past the edges of CSS2 in any major way.Six Questions: Eric Meyer on CSS3

Die Zeit ist reif

IE 8 wird als letzter seiner Zunft, wie andere auch, nur noch wenige Wünsche offen lassen, was die Implementierung von CSS2.1 betrifft. Durch die ziemlich breite Unterstützung von CSS2.1 ist damit auch eine gute Ausgangsbasis für die neuen Entzwicklungen gegeben.

Zu hoffen bleibt, dass sich in diesem Fall dann Geschichte nicht wiederholt. 2009(?) die Empfehlung und 2016 dann die breite Unterstützung von CSS3. Die jüngeren Entwicklungen (s. IE7 und IE8) lassen aber auf bessere Zeiten hoffen. Jetzt ist schon eher Vorfreude angesagt.

Probleme mit CSS3?

Matt Wilcox hat scheinbar größere Probleme mit CSS3, die er in The fundamental problems with CSS3 näher beschreibt. Dabei macht er sich v.a. auch über die, aus seiner Sicht, nicht konsequente Implementierung bestimmter CSS3 Features bzw. Module Gedanken. Daraus entwickelt sich dann im Anschluss auch eine teils erhitzte, dadurch aber auch sehr informative Diskussion zum Thema.

Weiter warten und beobachten

Als Webdesigner, der nicht in irgendwelcher Form direkt an der Entwicklung eines Standards beteiligt ist, bleibt einem nur zu warten und die Entwicklungen aus sicherer Entfernung zu beobachten. Zur Beobachtung der weiteren Entwicklungen zu CSS3, bieten sich derzeit v.a. zwei Informationsquellen an.

• Cascading Style Sheets Current Work: Am Puls der Entwicklung
• CSS3.info: Neuigkeiten und praktischer Ausblick

Zum Zeitvertreib für Zwischendurch und zum Träumen bietet sich der Artikel des Kulturbanausen an: Einführung in CSS3

Bildnachweis

Foto: snail