Einer der wichtigsten Punkte beim Vergleich und der Arbeit mit Layout-Frameworks ist die klare Trennung zwischen anwendungsorientierten Grid-Frameworks und entwicklungsorientierten CSS-Frameworks, da beide Typen vollkommen unterschiedliche Zielsetzungen verfolgen. Anhand der unterschiedlichen Konzepte und verschiedener Beispielprojekte werden Funktionsumfang, gestalterischen Möglichkeiten und auch die grundsätzlichen konzeptionellen Grenzen beider Framework-Typen erläutert.

Auf den Punkt gebracht lassen sich die beiden Typen wie folgt beschreiben:

• Sinn und Zweck von Grid-Frameworks sind schnelle Ergebnisse in der Anwendung.
• Sinn und Zweck eines CSS-Frameworks ist die Bereitstellung einer möglichst leistungsfähigen Entwicklungsumgebung.

Dank der hervorragenden Organisation des Kongresses kann ich an dieser Stelle nun nicht nur die Folien meines Vortrags zur Verfügung stellen (bei Slideshare auch als PDF zum Download), sondern es steht sogar einen Livemitschnitt des gesamten Vortrags im MP3-Format bereit (Download-Link in der Infobox). Ich bitte, den etwas holprigen Start des Vortrags zu entschuldigen - ich musste nach meiner Virusgrippe zunächst vorsichtig meine Stimme testen.

Hinweis: In der PDF-Fassung der Folien sind alle von mir vorgestellten Projekte verlinkt und können somit direkt angeklickt und die jeweiligen Webseiten besucht werden.

Der wurde am 4. September 2008 beim Webkongress Erlangen (Direktlink) gehalten.

• Kongress-Homepage
• Vortrag im MP3-Format (42.1 MB)
• Folien im PDF-Format (1.7 MB)

Konzept

Das erfrischende Konzept heißt Workshops und soll Einsteigern die Essenz von CSS nahebringen, ohne sie zu zwingen, die 458 Seiten von vorn nach hinten durchackern zu müssen. In insgesamt 30 Workshops mit einem Umfang von jeweils 10-20 Seiten werden dabei zahlreiche Themen des Webdesigns behandelt. Jeder Themenkreis umfasst drei bis vier in sich geschlossene Workshops. Sie starten jeweils mit einer kurzen Beschreibung des Arbeitsziels, gefolgt von der Entwicklung des HTML-Quellcodes und der Gestaltung der Elemente per CSS.

Der Schwerpunkt des Buches liegt ganz klar auf dem Designaspekt, weshalb das durchweg farbige Layout zu gefallen weiß und einen hervorragenden optischen Eindruck hinterlässt.
Unterbrochen werden die Workshops in regelmäßigen Abständen durch insgesamt 4 Exkurse, in denen kompakt CSS-Grundlagenwissen vermittelt wird. Die Zielgruppe sind – wie es der Titel bereits verrät – Einsteiger. Sie sollen CSS nicht aufgrund grauer Theorie, sondern anhand von ausgewählten Best-Practice-Lösungen erlernen, die ein breites Spektrum an Alltagsaufgaben abdecken.

Inhalt

Die Themenwahl des Buches ist ausgewogen. In den ersten Workshops geht es um die Gestaltung von Überschriften mit CSS und Image-Replacement-Techniken, dem Zusammenspiel von Text und Bild sowie listenbasierten Navigationen. Später steigt der Anspruch. So werden Bildergalerien mit CSS gestaltet und mittels JavaScript zum Leben erweckt, dann geht ans Eingemachte bei der Gestaltung von Formularen und Tabellen.  Die letzten drei Themenkreise umfassen den kreativen Umgang mit Hintergrundgrafiken, einen Einblick in die Erstellung fixer, elastischer und flexibler Layouts sowie einem abschließenden Special zu Diagrammen und Mikroformaten. Die neun Themenkreise sind abwechslungsreich und bieten für Einsteiger augenscheinlich einen umfassenden Überblick, wobei sich innerhalb der Themenbereiche einfache und anspruchsvollere Beispiele durchaus abwechseln.

Heiko Stiegert schreibt flüssig und nicht zu kompliziert, sodass man seinen Gedanken immer folgen kann. Alle Beispiele funktionieren fehlerfrei auf aktuellen Browsern sowie im IE6 und sind vollständig auf der Buch-DVD enthalten. Diese enthält übrigens neben zahlreichen Demoversionen verschiedenster HTML-Editoren noch vier zusätzliche Workshops im PDF-Format (natürlich ebenfalls im schicken, farbigen Layout des Buches), die nicht mehr im Buch untergebracht werden konnten.

Alles in allem eine runde Sache – möchte man meinen, dennoch ist das Buch nichts für Einsteiger, was im Folgenden auch begründet werden soll.

Kritik

Das Buch startet ohne jede Einleitung direkt mit dem Exkurs “Was sind Cascading Style Sheets”, was auch gleich im ersten Satz erklärt wird: “Cascading Style Sheets, oder kurz CSS, ist eine deklarative Auszeichnungssprache zur Definition von Formateigenschaften einzelner (X)HTML-Elemente.” Alles klar?

Im Anschluss werden die Möglichkeiten zur Einbindung von CSS in HTML vorgestellt, wobei von der Einbindung per STYLE-Element und STYLE-Attribut strikt (und ohne Ausnahmen) abgeraten wird. Dass diese Optionen in der namensgebenden “Kaskade” sehr wohl ihre Berechtigung haben, wird verschwiegen. Dafür werden im Schnellverfahren die Einbindung externer Stylesheets per LINK-Element, per @import-Regel und Conditional Comments für den Internet Explorer eingeführt, was Einsteiger mit Sicherheit überfordern dürfte.

Teilweise konstruierte Beispiele

Eigentlich sollten die Workshops Best-Practice-Lösungen anbieten, doch viele der Beispiele wirken konstruiert. Gleich im ersten Workshop “Überschriften per CSS gestalten” soll eine Überschrift zweizeilig dargestellt und gestaltet werden. Dazu wird der hintere Teil der Überschrift mit einem SPAN-Element umschlossen, welches für den Umbruch in die zweite Zeile sorgt. Ohne jede Erklärung sehen sich Einsteiger in diesem Workshop mit der Kurzschreibweise der font-Eigenschaft konfrontiert, einschließlich relativer Schriftgröße und Zeilenabstand. Dann wird plötzlich auch noch der Selektor :first-line eingeführt, um der ersten Zeile der Überschrift eine andere Farbe zuzuweisen. Egal welchen Teil der Überschrift man mit dem SPAN umschließt, mit h1 { ... } und h1 span { ... } lassen sich beide Teile vollständig gestalten, :first-line ist hier absolut unnötig und bläht das CSS nutzlos auf.

Ein weiteres Beispiel folgt im Workshop “Sind Gutenbergs Grundlagen auch auf das WWW übertragbar”. Hierbei geht es um die Positionierung nebeneinander liegender Textblöcke. Für viele Einsteiger ist das der Punkt, wo sie aus purer Verzweiflung zu Tabellen greifen, daher sind Lösungsvorschläge bei Einsteigern in höchstem Maße willkommen. Heiko Stiegerts Angebot basiert auf dem Multi-Column-Modul, welches vielleicht in CSS3 enthalten sein wird. Der Ansatz ist wunderbar einfach, logisch und leicht nachzuvollziehen. Dumm nur, dass weder das Multi-Column-Modul noch CSS3 praxisrelevant sind, unter anderem weil der Internet Explorer (IE5.x – 8.0) nichts dergleichen darstellen kann. Darauf weist der Autor am Ende des Workshops in der Marginalspalte auch hin, nur leider ohne Alternativen aufzuzeigen – oder per Querverweis auf den Workshop “Infoboxen in mehrspaltigem Layout”, ca. 150 Seiten weiter hinten im Buch zu verweisen, der zumindest einen gangbaren Lösungsweg aufzeigt.

Auch in den späteren Workshops wiederholt sich der Eindruck, konstruierter Beispiele. So wird beispielsweise im Workshop “Kooperation in Text und Bild” dem IE6 mühsam mittels JS-Hack die korrekte Darstellung alphatransparente PNG-Grafiken beigebracht, obwohl in dem konkreten Fall ein transparentes GIF vollkommen ausreichend gewesen wäre, was selbst der IE5.x problemfrei darstellt. Eine Übersicht darüber, wann welches Grafikformat (GIF, PNG 8-/24-bit, JPEG) sinnvoll ist, hätte ich mir hingegen in einem designorientierten Buch gewünscht.

Fachbegriffe, interne und externe Querverweise

Die Idee von in sich stimmig gestalteten Workshops ist ausgezeichnet, allerdings übertreibt man es hier mit der Abgrenzung. Das Buch enthält so gut wie keine Querverweise. Die Handvoll existierender Verweise in der Form “siehe Kapitel 2” sind weitgehend nutzlos, da die Workshops nicht nummeriert sind.

Auch auf Fachbegriffe und externe Verweise (Links zu Webseiten) wird verzichtet. Im Workshop Image-Replacment verwendet Heiko Stiegert die Phark-Methode, ohne sie beim Namen zu nennen. Gleichzeitig wird zur Wachsamkeit ermahnt: “… denn manche der Image-Replacement-Methoden setzen display:none ein”. Ist das wirklich der Fall? Jens Meierts Übersichts-Artikel (eigentlich ein Pflichtlink) erläutert 16 anerkannte Image-Replacement-Methoden (natürlich auch Phark) – und keine der vorgestellten Methoden verwendet display:none, was in der Tat der falsche Weg wäre. Einsteiger werden hier verunsichert, obwohl es im Internet gute Informationsquellen gibt, die zeigen, dass es dafür gar keinen Grund gibt.

Im ersten Navigations-Workshop wird eine horizontale Navigation erstellt, wobei die “Sliding-Doors”-Technik zum Einsatz kommt, ohne die Bezeichnung zu nennen. Einsteiger mögen zunächst begeistert sein, doch das Thema ist nichts Neues und Google weiß zu diesem Begriff eine Menge zu berichten. Ohne den Fachbegriff bleibt die Tür zu diesen Informationen allerdings verschlossen.

Aufgrund des anwendungsorientierten Workshop-Charakters sind Einsteiger zwangsläufig auf zusätzliche Lektüre angewiesen. Da ist es ungünstig, dass in mehreren Workshops SPAN- oder A-Elemente (beides klassische Inline-Elemente) zu Block-Elementen umdefiniert werden. Ein Hinweis auf das dahinterstehende Prinzip, mindestens aber die Erwähnung der Fachbegriffe, wären mehr als nur wünschenswert.

Am meisten gestört hat mich die Wahl des Markups im Workshop “Ein barrierefreies Formular”. Heiko Stiegert verwendet darin ohne Begründung Definitionslisten zur Gliederung der Input-Elemente und Labels, was mit Sicherheit diskussionswürdig ist. Das Formular bleibt weitgehend ungestylt, die Elemente werden lediglich horizontal ausgerichtet. Im darauffolgenden Workshop “Ein attraktives Formular” (Workshop-Titel auf der DVD) wird im Markup hingegen plötzlich eine unsortierte Liste verwendet und auch die optische Gestaltung des Formulars macht deutlich mehr her. Der im Vorwort definierte Anspruch des Buches “Ein Design muss unter Berücksichtigung von Accessibility und Usability schon lange kein fades und langweiliges oder einfach nur schmückendes Beiwerk sein.” wird in den Formularbeispielen aus der Sicht des Lesers ad absurdum geführt, denn das barrierefreie Formular verwendet streitbares Markup und sieht hässlich aus. Das “attraktive” Formular hingegen verwendet ein anderes Markup, was die Vermutung aufkommen lässt, nicht mehr barrierefrei zu sein bzw. das Barrierefreiheit und schöne Optik halt doch nicht zusammen passen. Einsteiger werden sich mangels Verweisen auf weiterführendes Infomaterial (beispielsweise der Beitrag “Reine Formsache” bei Einfach-fuer-Alle.de) zwangsläufig falsch orientieren.

Das Fehlen eines einleitenden Kapitels zur Beschreibung einiger wichtiger Arbeitsgrundlagen, sowie der vollständige Verzicht auf Querverweise führt beispielsweise dazu, dass der Leser die Berechnungsvorschrift einer relativen Schriftgröße als Prozentwert (Zielgröße / Schriftgröße des Elternelements = Eingabewert in Prozent) über 100 Mal in der Marginalspalte wiederfindet, teilweise bis zu drei Mal auf einer Doppelseite. Beim Lesen des Buches stören die endlosen Wiederholungen schnell und es ist schade um den Platz, der für andere Informationen hätte genutzt werden könnten.

Auch einige grobe Fehler finden sich im Buch. So wird auf Seite 358 dem Internet Explorer 6 fälschlicher Weise nachgesagt, das Box-Modell generell fehlerhaft zu interpretieren. Diese Aussage ist schlicht weg falsch. Im Standard Mode interpretiert der IE6 das Box-Modell korrekt. Der Box-Modell-Bug (bekannt vom IE5.x) ist lediglich im Quirks Mode aktiv und sollte damit bei standardkonformen Webseiten und in den Workshops (die alle auf XHTML 1.0 Strict basieren) keine Rolle spielen.

Was uns gefiel

Die ausführliche Beschreibung der einzelnen Kritikpunkte soll nicht den Eindruck erwecken, das Buch sei generell unbrauchbar. Deswegen möchten wir nach all den kritischen Anmerkungen ein Lob für die zahlreichen gelungenen Workshops nicht unterschlagen.

So wird beispielsweise im dritten Workshop die Implementation des Flash Replacements (sIFR) sehr gut nachvollziehbar erklärt. Der Workshop zur Gestaltung von Zitaten unter Einbeziehung einiger typographischer Rafinessen gefällt ebenso wie die drei Tutorials zur Gestaltung von Tabellen mit CSS, wobei der gestalterische Anspruch schrittweise gesteigert wird. In zwei weiteren Workshops zeigt Heiko Stiegert, wie man mit HTML und CSS eine kleine Bildergalerie zaubert. Der zweite Workshop geht noch einen Schritt weiter und bringt JavaScript mit ins Spiel. Beide Workshops dürften auch Einsteigern helfen, bei komplexeren Aufgaben sicher ans Ziel zu kommen. Natürlich geht das JavaScript-Beispiel im Rahmen des Workshops nicht sonderlich in die Tiefe, aber es zeigt das grundlegende Konzept, JavaScript unaufdringlich als Präsentationslayer über HTML und CSS einzubinden.

Einen schönen Abschluss des Buches bilden die fünf Specials, in denen weniger Alltägliches aber nicht weniger interessante Lösungen für die Erstellung einfacher Balkendiagramme, Sitemaps sowie für die Gestaltung der wichtigsten Mikroformate (hCard, hCalendar, hReview) vorgestellt werden.

Fazit

CSS-Design ist ein interessantes Buch mit vielen praktischen Detaillösungen, jedoch für Einsteiger nicht zu empfehlen. An vielen Stellen werden Entscheidungen nicht begründet. Die Workshops suggerieren Best-Practice-Lösungen, wie sie erfahrene Webdesigner verwenden würden. Diesem Anspruch werden sie jedoch häufig nicht gerecht.

Hat man als Leser hingegen schon einige Erfahrungen im Umgang mit CSS gesammelt, bietet das Buch zahlreiche Anregungen für die tägliche Arbeit. Es zeigt, wie Heiko Stiegert sich den verschiedenen Aufgaben nähert und es ist für fast jeden Webdesigner etwas Interessantes, Neues und Nützliches dabei. Vermutlich waren Einsteiger auch während des Schreibens nicht die eigentliche Zielgruppe, denn im Vorwort spricht Heiko Stiegert selbst noch vom Arbeitstitel “CSS-Design. Tutorials für moderne Webseiten”, was dem Inhalt bei weitem näher kommt und viele der angesprochenen Kritikpunkte weniger kritisch erscheinen lassen würde. Grundlegende Fachbegriffe (Inline-/Block-Elemente, Float-Clearing usw.) werden im Buch mehrfach umschrieben, aber nicht klar definiert. In einem Design-Buch müssen keinesfalls die Grundlagen von HTML und CSS erläutert werden, auch wenn es sich an Einsteiger richtet. Aber man sollte die Dinge zumindest beim Namen nennen, sodass der Leser sich in ergänzender Fachliteratur informieren kann. Der weitgehende Verzicht auf externe Quellen wiegt speziell bei der anvisierten Zielgruppe “Einsteiger” schwer.

Zusammenfassend geben wir diesem Buch 3 bis 3,5 von 5 Sternen (wir konnten uns nicht entscheiden). Der Großteil der Kritik bezieht sich dabei auf die verfehlte Zielgruppe, wofür Heiko Stiegert vermutlich am wenigsten kann, wie es der Arbeitstitel im Vorwort vermuten lässt. Der zweite Schwachpunkt betrifft die fehlenden internen und externen Querverweise sowie die z.T. konstruierten Beispiele, die nicht als Best-Practice-Lösungen zu empfehlen sind.

Trotz aller notwendiger Kritik hat der Workshop-Charakter unbestreitbar seinen Reiz und die Umsetzung gefällt, zudem betritt der Verlag mit dem Konzept Neuland. Schon deshalb haben Buch und Autor eine zweite Auflage verdient.

• Gebundene Ausgabe: 458 Seiten
• Verlag: Galileo Press; Auflage: 1 (Juni 2008)
• Aufmachung: Gebunden komplett in Farbe + DVD
• Sprache: Deutsch
• ISBN-10: 3836211556
• ISBN-13: 978-3836211550
• Webseite zum Buch

Über den Autor

Heiko Stiegert arbeitet als Webentwickler und –designer in einer Berliner Agentur und Betreiber des Webstandards Blog.

In der Tat ist es so, dass die überwiegende Mehrzahl der im Netz befindlichen Webseiten ein fixes Layout hat. Die Standardtreue der Browser hat sich in den letzten Jahren jodoch stark verbessert, zusätzlich erleichtern CSS Frameworks wie YAML oder YUI die Erstellung flexibler Layouts. Was bleibt sind die grafischen Zwänge, die in einigen Fällen eine fixe Lösung quasi erzwingen. Im Zuge der Veröffentlichung des Firefox 3 fanden sich jedoch in der weltweiten Blogosphäre vermehrt Stimmen, die mit der großflächigen Verfügbarkeit des “Seitenzooms” (IE7, Firefox 3, Opera 9) gar das generelle Ende der flexiblen Layouts vorhersagten. Als Hauptargument wird angeführ, dass sich fortan jedes fixe Layout über den Seitenzoom skalieren lässt.

Ich habe mir diesbezüglich vor einiger Zeit in meinem Weblog Gedanken gemacht und den Beitrag später in einer überarbeiteten Fassung als Essay veröffentlicht, der dankenswerter Weise bei Dr. Web und im Smashing Magazine veröffentlicht wurde. Der Essay ist daher hier nicht im Volltext verfügbar, die Infobox enthält jedoch die Direktlinks zur deutschen und englischen Fassung.

Der Essay wurde am 12. Juni 2008 bei Dr. Web (Direktlink) und am 26. Juni 2008 in englischer Übersetzung im Smashing Magazine (Direktlink) veröffentlicht.

| View | Upload your own

Die Folien des Vortrages stehen ab sofort bei SlideShare unter Creative Commons Lizenz bereit.

Der Vortrag wurde am 3. Mai 2008 auf dem Leipziger Barcamp 2008 gehalten.

Für kleinerer Webauftritte, z.B. Weblogs, ist das meist ausreichend. Bei größeren Projekten oder der Verwendung von Content-Management-Systemen verliert man jedoch schnell die Übersicht. Für den produktiven Betrieb kann es durchaus sinnvoll sein, Stylesheets gezielt zu optimieren. Die Entwicklerfassung sollte jedoch immer möglichst gut dokumentiert sein.

CSSDOC – Ein Ansatz für einen Standard

Kein gewissenhafter Programmierer lässt seinen Code undokumentiert. Jenseits des CSS-Tellerrandes existieren daher Lösungen wie Javadoc oder Scriptdoc. Beide Standards verwenden spezielle Kommentare, um Programmcode möglichst effektiv zu dokumentieren bzw. sie ermöglichen die automatische Erstellung von Modul-/Programmdokumentationen. CSSDOC wird von Tom Klingenberg, Timo Derstappen und Dirk Jesse entwickelt und ist ein Ansatz, die Vorteile dieser Lösungen auch für die Arbeit mit CSS nutzbar zu machen.

Grundlagen

Ein Kommentar wird in CSSDOC als DocBlock bezeichnet und folgt einer speziellen Schreibweise. Zu unterscheiden sind dabei DocBlocks für einzelne Abschnitte (section comments) und Dateikommentare (file comments), die den Inhalt einer Datei beschreiben.

Jeder DocBlock wird von der Zeichenkette /** eingeleitet und mit */ beendet. Beide Zeichenketten stehen separat in einer Zeile. Dazwischen befinden sich die eigentlichen Informationen, wodurch das Format für Maschinen lesbar wird.

 /**
  * Ein einfacher DocBlock
  *
  * Gelegentlich ist etwas mehr zu sagen. Dann  koennen sich
  * Kommentare auch schonmal ueber mehrere  Zeilen erstrecken.
  */

Das Salz in der Suppe - Tags

Durch spezielle Tags kann der Informationsgehalt eines DocBlocks entscheidend gesteigert werden. Tags können Strukturinformationen, Autoren- und Copyrightinformationen, Information zur Browserkompatibilität usw. enthalten. Ein Tag beginnt immer mit dem Zeichen ‘@’.  Beispiel 2 enthält einen Abschnittsbeginn (@section) sowie einen Querverweise (@see).

 /**
  * @section browser reset
  * @see     http://www.yaml.de/documentation/…
  *
  * Reset any browser specific CSS ...
  */

Auch Bugfixes werden durch CSSDOC besser verständlich.

 /**
  * Doubled Float-Margin Bug
  * @see   http://…
  *
  * @bugfix
  * @affected   IE 5.x/Win, IE6
  * @css-for    all browsers
  * @valid      yes
  */

  .float_left { float:left; display: inline }

Die Anzahl der Tags ist relativ hoch, daher erfordert ihre Anwendung zweifellos etwas Übung. Du wirst jedoch mit der Zeit feststellen, dass du dank CSSDOC auch nach längeren Bearbeitungspausen schneller Zugang zu Ihrem eigenen oder auch CSS-Code anderer Entwickler finden wirst.

Der Beitrag wurde am 3. Dezember 2007 erstmals im Rahmen des Beitragsserie “Adventskalender 2007” bei den Webkrauts veröffentlicht (Direktlink).

Das Box-Modell und seine Grenzen

Bei dem bestehenden, mit CSS1 eingeführten Box-Modell ergibt sich die Gesamtbreite einer Box aus der Addition des Inhaltsbereiches (width), der Innenabstände (padding) und der Rahmen (border). Aus dieser Regelung ergeben sich für die moderne Layoutgestaltung jedoch einige Nachteile. So lässt sich beispielsweise die Gesamtbreite einer Box nur dann im Vorfeld ermitteln, wenn innerhalb der einzelnen Bestandteile (width, padding und border) keine unterschiedlichen Maßeinheiten verwendet werden. Sollen alle Bestandteile des Box-Modells zum Einsatz kommen, so reduzieren sich die sinnvoll verwendbaren Maßeinheiten auf px und em, denn Rahmenbreiten in Prozentangaben sind bisher nicht erlaubt. Die Freiheiten des Seitenerstellers sind damit von vorn herein stark einschränkt.

Verwendet man hingegen unterschiedliche Maßeinheiten - Breite des Inhaltsbereiches als Prozentwert, Innenabstände in em und Rahmenbreiten in px - lässt sich mit dem derzeitigen Box-Modell die Gesamtbreite einer Box nicht mehr exakt bestimmen.  Während die Breite des Inhaltsbereiches des Containers direkt angegeben werden kann, kann die Gesamtbreite der Box (der für die Layoutgestaltung wichtigere Wert) erst beim Rendering dynamisch vom Browser ermittelt werden. Dieser Umstand verkompliziert derzeit die Erstellung flexibler Layouts noch unnötig. Beseitigen lässt sich diese Designschwäche von CSS bisher nur durch die Verschachtelung mehrerer Boxen und damit mit zusätzlichem Markup.

Neue Möglichkeiten mit CSS 3

box-sizing - ein alternatives Box-Modell

Mit der Eigenschaft box-sizing hält ein alternatives Box-Modell Einzug in CSS 3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch box-sizing:border-box die Angaben für width als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert. Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben padding und border keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht.

Dieses neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS 1 (box-sizing:content-box) und dem alternativen Modell von CSS 3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

calc() - Rechnen innerhalb von CSS

Der aktuelle Entwurf für CSS 3 enthält noch einen weiteren interessanter Ansatz, dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
   float:left;
   padding: 0 1em;
   border-right: 1px #888 dotted;
   width: calc( 30% - 2*1em - 1px );
}

#right {
   float:right;
   padding: 0 1em;
   width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion calc() ist es eigentlich egal, mit ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für der Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Column - Spaltensatz mit CSS

Noch heute basieren viele Layouts auf Tabellenkonstrukten - dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS 2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung. Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS 3 wird der allseits beliebte Spaltensatz über die Eigenschaft column nun endlich Einzug in den CSS-Standard finden.

#3col_container {
   column-count: 3;
   column-gap: 20px;
   ... 
}

Über die Eigenschaften column-count wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für column-gap regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten. Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen.

Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS 3-Spaltensatzes machen, wenn Sie den folgenden Links mit dem Firefox Browser folgen, der die Eigenschaft bereits unterstützt.

• Introducing the CSS3 Multi-Column Module
• CSS 3 Columns / Mehrspalten-Layout-Modul

Wohin geht die Reise und wer bleibt zurück?

Im ersten Moment sieht die Zukunft aus wie ein Schlaraffenland. Wenn da nicht die Bedenken wären, die - je mehr ich über das Thema nachdenke - sich immer klarer abzeichnen.

Browserweichen für CSS3

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE5.0 bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen. Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und dabei jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützen. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen. Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert. Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das "fehlerhafte" Box-Modell des IE plötzlich offiziell eingeführt. Ich bin gespannt, welche Hack-Konstrukte allein aus dieser Problematik in der Versionsfolge dieses Browsers entstehen.

Ausblick

Auf Grund der bisher ungelösten Probleme für den Übergang von CSS 2 auf CSS 3 wäre es wohl das Beste, wenn der Wechsel noch ein Weilchen auf sich warten lassen würde. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen. Niemandem ist mit einem fehlerbehafteten CSS 3-Browser geholfen. Wir werden zudem damit rechnen müssen, dass auch unter den wichtigen Browsern der ein- oder andere sein wird, der mehr als nur einen Generationswechsel benötigt, um den kommenden neuen Standard zu unterstützen. Wenn es schneller geht, wird es allen zugute kommen. Allerdings glauben - das hat die Erfahrung gelehrt - mag ich an einen schnellen Umstieg nicht.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen Funktionen von CSS 3. In den weiterführenden Links am Ende des Beitrags finden Sie daher einige Beispielseiten, auf denen Sie in Verbindung z.B. mit dem Firefox schonmal CSS 3-Luft schnuppern können.

Fazit

CSS 3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. 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.

Quellen:

1. SelfHTML: Das Box-Modell
2. webkrauts.de: CSS der Zukunft
3. webkrauts.de: Festes vs. flexibles Layout
4. A List Apart: Introducing the CSS3 Multi-Column Module
5. Joost de Valk: CSS 3 Preview
6. CSS4You: Darstellungsmodi der Webbrowser

Der Beitrag wurde am 10. Dezember 2006 erstmals im Rahmen des Beitragsserie “Adventskalender 2006” bei den Webkrauts veröffentlicht (Direktlink).

Neues auf der Anwenderseite

• Die Benutzeroberfläche scheint sich bereits am neuem Windows-Vista-Look zu orientieren und ist mit Sicherheit gewöhnungsbedürftig. Sie zeichnet sich aber durch eine einfachere Zugänglichkeit wichtiger Funktionen (Zoom, Druckvorschau, Popup-Blocker usw.) aus, die mit wenigen Klicks erreichbar sind.
• Mit ›Tabbed Browsing‹ führt Microsoft eine Funktion ein, die in der Mozilla-Familie, in Safari und beim Opera schon seit vielen Jahren bekannt und beliebt ist. Mit ihr werden mehrere Webseiten als Karteireiter innerhalb eines Fensters verwaltet, die Überfüllung der Windows-Taskbar wird so verhindert.
• Mit RSS-Feeds (RSS = Really Simple Syndication) hat sich ein XML-Standard etabliert, der eine Nachrichtenabfrage von Webseiten ermöglicht. Solche Feeds können abonniert und automatisiert abgerufen werden. So kann der Nutzer in einfacher und unkomplizierter Weise auf Informationen vieler verschiedener Seiten zugreifen. Ein einfacher Feed-Reader ist – vergleichbar zu andern Browsern – nun im IE7 bereits integriert.
• Durch einen integrierten Phishing-Filter soll die Sicherheit vor Betrügern erhöht werden. Mittels Pishing werden Nutzer auf betrügerischen Webseiten zur Herausgabe von Passwörtern oder Zugangsdaten animiert. Der Firefox bietet übrigens seit Version 2.0 eine ähnliche Funktion an.
• Eine neue komfortable Druckvorschau vereinfacht das Drucken von Webseiten. Layouts werden automatisch auf Seitenbreite skaliert, Seitenränder lassen sich schnell und unkompliziert anpassen, Kopf- und Fußzeilen können auf Wunsch ausgeblendet werden.
• Ebenso wie der Firefox lässt sich der Internet Explorer 7 durch Add-Ons im Funktionsumfang erweitern.
• Die Darstellungsqualität von Webseiten, bzw. die Lesbarkeit von Texten, wird durch das standardmäßig aktivierte Kantenglättungsverfahren ClearType verbessert.
• Statt des bisher üblichen Text-Zooms, bei dem lediglich die Schriftgröße von Texten vergrößert wird, bietet der IE7 einen so genannten Seiten-Zoom. Dabei werden neben der Schriftgröße auch alle anderen Element der Webseite (Grafiken, Abstände, Spaltenbreiten) skaliert. Ein ähnliches Verfahren ist bereits vom Opera-Browser bekannt.

Der praktische Umgang mit dem neuen Browser geht – nach kurzer Eingewöhnungsphase – gut von der Hand. Auf der Anwenderseite ist der Browser damit endlich auf der Höhe der Zeit und bietet zu Firefox, Safari, Opera & Co. einen vergleichbaren Funktionsumfang und Komfort. Durch den integrierten Phishing-Filter steigt zudem das Sicherheitsniveau. Der erste Eindruck ist daher durchaus positiv, obwohl nicht alle Details optimal gelöst sind.

Seitenzoom - Ärger vorprogrammiert

Eine der gravierendsten, jedoch bisher am wenigsten bekannten Änderungen ist das neue Zoom-Verhalten. Dabei betrachtet der Browser das Ergebnis des Rendering-Prozesses wie ein beschriebenes Blatt Papier, das anschließend als Ganzes vergrößert oder verkleinert werden kann. Dabei werden nicht mehr nur Schriftgrößen skaliert, sondern das gesamte Layout – einschließlich aller Abstände, Größenangaben, Bildern und Grafiken. Dieses Zoom-Verhalten ist Opera-Nutzern seit der Verion 8 vertraut; allerdings berücksichtigt der Opera dabei sowohl flexible Layoutbreiten als auch eine Zentrierung des Layouts – der IE7 tut dies nicht.

Was auf den ersten Blick vorteilhaft und sinnvoll erscheint, erweist sich in der Umsetzung bei näherer Betrachtung als Zeitbombe. Durch das neue Zoom-Verhalten wird im IE7 ab sofort jedes Layout skalierbar, egal ob es als fixes oder flexibles Layout entworfen wurde. Da die Mehrzahl der Layouts im Internet auf fixe Breiten optimiert ist, ergibt sich hieraus theoretisch ein Zugewinn an Zugänglichkeit. Praktisch führt dieses Verhalten jedoch zu massiven Problemen. Beispielsweise funktionieren flexible Layouts nur noch eingeschränkt, da die eigentlich flexible Breitenvorgabe nur beim initialen Rendering beachtet wird. Skaliert wird anschließend, als ob es sich um ein fixes Layout handeln würde. Es wird also einfach alles größer, was bei 100% breiten Layouts umgehend zu horizontalen Scrollbalken führt. Auch die Zentrierung eines Layouts wird durch den Seiten-Zoom zerstört: Die seitlichen Außenabstände werden unsinnigerweise mitskaliert. Sollte sich dieses Zoom-Verhalten durchsetzen, stellt dies den Sinn flexibler Layouts generell in Frage.

Änderungen in der Rendering-Engine

Für Webentwickler war der Internet Explorer 6 aufgrund seiner zahlreichen CSS-Bugs und der für die heutigen Verhältnisse mäßigen Unterstützung des CSS2-Standards eine nie versiegende Quelle für Darstellungsprobleme und Frust. Daher werden auch die Änderungen im Bereich des Renderingverhaltens über Erfolg oder Misserfolg des IE7 entscheiden.

In bisher beispielloser Offenheit hat Microsoft Webentwicker im Verlauf der letzten zwölf Monate am Reifeprozess des Internet Explorer 7 teilnehmen lassen. Über insgesamt drei Beta-Phasen und einen Release-Candidate konnten Sie die Fortschritte des Browsers im Bereich des Renderings zeitnah mitverfolgen und durch Umfragen mitbestimmen. Der Schwerpunkt der ersten neuen IE-Version nach nunmehr fünf Jahren lag dabei weniger auf der Erweiterung der CSS2-Unterstützung, sondern vielmehr auf der Beseitigung der zahlreichen Bugs.

Weniger CSS- und Parser-Bugs

Die Liste der CSS-Änderungen im IE-Blog ist erfreulicherweise lang, denn durch die zahlreichen Fehlerkorrekturen wird die Layoutentwicklung spürbar einfacher. Ich beschränke mich im Rahmen dieses Artikels auf eine Zusammenfassung der wichtigsten Änderungen.

• Ausgangsbasis für die Beseitigung der CSS-Bugs war offensichtlich die hervorragende Bug-Dokumentation auf positioniseverything.net. Fast alle auf der Seite aufgeführten CSS-Bugs des Internet Explorer 5.x und 6 wurden behoben. Hervorzuheben sind dabei in erster Linie der Peekabo- und der Guillotine-Bug, mit denen sicherlich fast jeder Homepagebastler schon einmal Bekanntschaft gemacht hat (springende und/oder teilweise verschwindende Inhalte bei Hover-Effekten von Hyperlinks). Das so genannte Expanding-Box-Problem des IE 5.x und 6.0 (das automatische Einschließen von Elementen innerhalb einer Box) bereitete insbesondere in der Layoutentwicklung Kopfzerbrechen.
  Etwas unverständlich ist, warum der letzte verbliebene Bug auf der Liste, der Escaping-Floats-Bug nicht ebenfalls behoben wurde. Nach fünf Jahren Entwicklungspause hätte ich mir von Microsoft mehr Ehrgeiz und Konsequenz gewünscht. Hinzu kommt: Die Liste auf positioniseverything.net enthält nicht alle CSS-Bugs der älteren Browserversionen, sondern lediglich die bekanntesten Exemplare. Der IE7 ist daher – trotz der zahlreichen Bugfixes – nicht gänzlich fehlerfrei. Ich habe den Entwicklungsprozess durch meine Arbeit an YAML kontinuierlich verfolgt und eine kleine Sammlung an CSS-Bugs zusammengestellt, die nicht beseitigt bzw. neu hinzu gekommen sind.
• Neben den zahlreichen CSS-Bugs wurde auch der überwiegende Teil der Parser-Bugs behoben. Parser-Bugs sind Fehler beim »lesen« von CSS. Sie ermöglichen bei gezielter Ausnutzung (so genannte Parser-Hacks) das Verstecken von einzelnen CSS-Definitionen vor dem Internet Explorer. Alternativ kann man damit nur für den IE lesbare Anweisungen formulieren. Parser-Hacks waren daher in der Vergangenheit ein beliebtes Mittel zur Korrektur von CSS-Bugs.
  Webseiten, die massiv auf solche Parser-Hacks bauen, werden jedoch unter Umständen vermehrt mit Darstellungsfehlern im IE7 zu kämpfen haben. Kritisch sind insbesondere Situationen, in denen der zu fixende CSS-Bug noch aktiv ist, der Parser-Hack samt Bugfix jedoch nicht mehr funktioniert. Der beste und auch von Microsoft empfohlene Weg, um den Internet Explorer mit speziellen Stil-Anweisungen zu versorgen, sind daher Conditional Comments.

In der Summe verhält sich der Internet Explorer 7 damit deutlich standardkonformer als sein Vorgänger. Durch die zahlreich behobenen Bugs können CSS-Layouts im IE7 in der Regel ohne nennenswerten Anpassungsaufwand gegenüber anderen Browsern erstellt werden. Schwierger sieht die Lage bei der Browserunterstützung aus. Da der IE7 ausschließlich für Windows XP mit installiertem Servicepack 2 und für das kommende Windows Vista zur Verfügung steht, wird er den Internet Explorer 6 nicht gänzlich von der Bühne verdrängen können. Nutzer älterer Windows-Versionen oder Windows XP ohne installiertes Servicepack 2 schauen in die Röhre. Für Webdesigner wird es damit nicht gerade einfacher, denn sie müssen somit auch noch eine dritte Browsergeneration (5.x, 6.0 und 7.0) unterstützen.

Erweiterung der CSS-Unterstützung

Wie bereits angesprochen, lag der Schwerpunkt der Arbeiten nicht auf einer Erweiterung der CSS-Fähigkeiten des Browsers. Es ist daher wenig verwunderlich, dass sich in diesem Bereich relativ wenig getan hat. Dennoch gibt es einige interessante und wichtige Neuerungen zu vermelden.

• Die Pseudoklasse :hover kann nun mit allen HTML-Elementen verwendet werden und ist nicht mehr auf Hyperlinks (<a>) beschränkt.
• Ab sofort werden die CSS-Eigenschaften min-width, max-width sowie min-height und max-height unterstützt.
• Die CSS-Eigenschaft position:fixed wird unterstützt.
• Die Übergabe mehrerer CSS-Klassen in der Form class="klasse1 klasse2” funktioniert jetzt fehlerfrei.
• Der IE7 bringt endlich die vollständige Unterstützung von PNG-Grafiken einschließlich der Alpha-Transparenz mit, wodurch sich für den Webdesigner zahlreiche neue Möglichkeiten der Layoutgestaltung ergeben.

Eric Eggert hat bin seinem Weblog bereits vor einigen Wochen die aus seiner Sicht zehn wichtigsten Neuerungen des IE7 zusammengefasst. In Sachen CSS2-Unterstützung ist der Sprung nach vorn nicht so groß wie bei der Nutzerfreundlichkeit.

Als Webdesigner habe ich daher gemischte Gefühle. Einerseits freue ich mich über die beseitigten CSS-Bugs, andererseits hätte die Liste durchaus vollständiger ausfallen können. In erster Linie wurden bekannte und gut dokumentierte Bugs beseitigt, eine vollständige Überarbeitung der Rendering-Engine (bei der man sicherlich zahlreichen, weiteren Bugs auf die Schliche gekommen wäre) gab es hingegen nicht.

Wenig erfreulich ist auch die geringe Erweiterung der CSS2-Fähigkeiten. Die Unterstützung von minimalen und maximalen Breiten oder die Implementierung der fixen Positionierung sind erfreulich, aber auch längst überfällig und zugleich nur ein Tropfen auf den heißen Stein. Die Methoden der Layoutentwicklung haben sich seit 2001 signifikant weiterentwickelt (Stichwort: easyclear). Die fehlende Unterstützung erweiterter CSS2-Selektoren (z.B. Pseudoklassen :after und :before) ist daher umso bedauerlicher, zwingt sie Webentwickler doch auch weiterhin zu speziellen Anpassungen für den Internet Explorer und schränkt die Einsatzmöglichkeiten dieser interessanten Gestaltungselemente von CSS2 auch weiterhin ein.

Der Internet Explorer 7 ist in Sachen CSS daher eher ein IE6 mit weniger Bugs. Für die Zukunft hat Microsoft jedoch Besserung gelobt: In jährlichen Updates soll der Browser weiterentwickelt werden, Nachdem der Schwerpunkt der aktuellen Version auf einer verbesserten Sicherheit und Benutzerfreundlichkeit lag, soll in zukünftigen Versionen die auch CSS-Unterstützung erweitert werden.

Fazit

Der neue Browser ist da und er darf nicht ignoriert werden. Über die automatische Verbreitung per Windows-Update wird er sich vermutlich bereits binnen weniger Monate als neuen Marktführer etablieren. Höchste Zeit also, sich mit ihm vertraut zu machen.

In Bezug auf die Unterstützung von Standards ist es auf alle Fälle ein Schritt nach vorn. Ob Microsoft mit dem IE7 der große Wurf gelungen ist, bleibt jedoch abzuwarten. Die Entwicklung geht auf jeden Fall in die richtige Richtung, daher fällt mein Fazit für den Moment positiv aus. Der neue Browser muss sich aber erst seine Sporen verdienen und Stabilität beweisen. Ob die Anzahl der CSS-Bugs wirklich zurückgegangen ist oder neue Bugs auftauchen, wird erst die Praxis zeigen.

Quellen:

1. Microsoft: Internet Explorer 7 Startseite
2. Alp Uçkan: Was ist RSS?
3. Wikipedia: ClearType
4. IEBlog: Details on our CSS changes for IE7
5. Holly 'n' John: Explorer Exposed! The weird and wonderful world of Internet Explorer
6. Dirk Jesse: Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework
7. Dirk Jesse: Testseite für CSS-Bugs des IE7
8. Eric Eggert: Die 10 wichtigsten IE7-Neuerungen
9. Onno K. Gent: Einschließen von Floats ohne zusätzliches Markup

Der Beitrag wurde erstmals am 3. November 2006 bei den Webkrauts veröffentlicht (Direktlink).