Webkrauts

CSS3 im Praxistest: Multi-column Layout

Das mehrspaltige Layout ist eine spannende Neuerung des CSS3-Standards. Mit nur wenigen CSS-Anweisungen können Webworker Texte ansprechend gestalten. Stephan Heller zeigt die theoretischen Möglichkeiten und hinterfragt die Praxistauglichkeit: Was ist möglich und wo liegen die Grenzen?

Das Multi-column-Layout-Modul ist eine der Neuerungen des CSS3-Standards. Über die Eigenschaften dieses Moduls können Webworker Inhalte eines einzigen Blockelements in einem mehrspaltigen Layout darstellen, ohne dass HTML-Elemente für den Aufbau der einzelnen Spalten notwendig sind. Die Anzahl der Eigenschaften für eine mehrspaltige Darstellung ist überschaubar, der theoretische Einsatz verhältnismäßig einfach.

Die Minimalangabe für eine mehrspaltige Anzeige sieht wie folgt aus:

Diese Anweisung »aktiviert« die Mehrspaltigkeit , darüber werden drei Spalten generiert beziehungsweise Spalten mit einer Breite von je 200px erzwungen.

• column-count alleine eingesetzt verteilt die definierte Anzahl von Spalten gleichmäßig auf die verfügbare Breite.
• column-width ist als Mindestbreite zu verstehen. Stehen 500px zur Verfügung, generiert diese Anweisung zwei Spalten. Dabei berechnet sich die Spaltenbreite aus der Gesamtbreite abzüglich des Abstands zwischen den Spalten. Dieser ist ohne eine Angabe für column-gap 1em breit, was ohne weitere font-size-Angabe im CSS 16px sind. Die Verteilung auf 500px sähe folgendermaßen aus: Spalte (242px) – Abstand (16px) – Spalte (242px). Bei einer Breite von 300px würde diese Anweisung nur eine Spalte mit einer Breite von 300px erzeugen.

Browserunterstützung

Alleine Opera 11 *) versteht diese Anweisung in der Schreibweise des Standards. Internet Explorer bis zur Version 9 unterstützen mehrspaltiges Layout nicht, Firefox 7, Safari 5 und Google Chrome 14 benötigen das jeweilige »Vendor-Präfix« –moz- bzw. –webkit-.

Vendor-Präfixe sind vom W3C vorgesehen und ermöglichen den einzelnen Browserherstellern, CSS-Eigenschaften (Properties) in »einer Art Testphase« zu implementieren. Das Kürzel wird den Eigenschaften vorangstellt, im konkreten Fall ist die Schreibweise -moz-column-count für Firefox oder -webkit-column-count für die Webkit-Browser Safari und Chrome. Diese Angaben werden vom entsprechenden Browser interpretiert, andere Browser ignorieren die Anweisung und bleiben von dem Eintrag unberührt, ohne dass das CSS selber fehlerhaft wird. Eine Übersicht der Vendor-Präfixe findet ihr beim W3C: http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

Die vollständige CSS-Regel für Opera, Firefox, Safari und Google Chrome unter Berücksichtigung aller individuellen Schreibweisen könnt ihr folgendermaßen angeben:

Allerdings setzen die Browser diese Regel unterschiedlich um. Sind column-count und column-width gleichzeitig definiert, ignoriert Opera column-count. Firefox, Safari und Chrome stellen in der Kombination beider Properties column-count als maximale Anzahl von Spalten dar. Falls sich durch column-width drei Spalten ergeben würden, column-count aber mit dem Wert 2 versehen ist, kommt es zu einer Darstellung von zwei Spalten. Für dieses Verhalten spielt die Reihenfolge der Parameter keine Rolle, ein !important kann auch nichts daran ändern.

Kurzschreibweise columns

Kurzschreibweisen (Shorthand Properties) erlauben es, Parameter für mehrere CSS-Eigenschaften in einem Ausdruck anzugeben. Webworker können column-count und column-width über columns zusammen fassen.

Allerdings ignoriert der Firefox columns, obwohl er die einzelnen Eigenschaften kennt. Wer eine mehrspaltige Darstellung in einem möglichst kurzem Ausdruck definieren will, muss von daher die einzelnen Eigenschaften für den Firefox berücksichtigen. Der vollständige Code sieht so aus:

Eher verwirrend ist, dass die Kurzschreibweise columns im Plural, also mit einem S am Ende geschrieben ist. Verglichen mit anderen Shorthand-Properties (margin, padding, border usw.) wirkt dies wie ein Regelverstoß. Die Nachfrage beim W3C ergab, dass die Entwickler des Standards eher eine »natürliche Bezeichnung« bevorzugt haben und sich an Eigenschaften wie widows und orphans orientiert haben. Dies ist nachvollziehbar und gleichzeitig zu hinterfragen: Es gibt weitere Properties, die im Plural formuliert sind, allerdings sind diese keine Kurzschreibweisen für einzelne CSS-Eigenschaften. Diesen Umstand würde ich zumindest als potentielle Fehlerquelle bewerten.

Gute Unterstützung von Trennlinien

Ohne weitere Angabe ist der trennende Platz zwischen den Spalten leer. Über column-rule (als Kurzschreibweise) oder column-rule-width, column-rule-style und column-rule-color steuert ihr das Aussehen der Trennlinien. Hier stehen alle Werte von border zur Verfügung, auch das Verhalten ist mit border vergleichbar: Unter anderem wird die Trennline in der Farbe des Textes (Angabe in color) dargestellt, wenn kein Wert für column-rule-color vergeben ist. Auch der Standardwert für die Dicke ist medium und wird vom Browser angezeigt, wenn eine ausdrückliche Angabe fehlt.

Eine Pflichtangabe ist der »Style« der Trennlinie, entweder über column-rule-style oder über die Kurzschreibweise column-rule. Nur so kommt es überhaupt zu einer Darstellung der Trennlinien. Dabei werden diese immer mittig im Spaltenabstand dargestellt, die Position könnt ihr nicht beeinflussen. Opera unterstützt auch dies vollständig, Firefox und die Webkitbrowser benötigen auch hier das Vendor-Präfix.

Im Gegensatz zu border macht eine Trennlinie Spalten nicht enger, sondern verhält sich wie ein outline Die Linie wird »über« die Darstellung gelegt und beeinflusst nicht den Elementfluß. Dadurch können sich Trennlinien mit dem Spaltenabstand beißen. Falls die Linie breiter als der Zwischenraum ist, überlagert diese im Opera und Firefox den Inhalt. Safari und Chrome stellen die Linie in dem Fall nicht dar.

Mit der Eigenschaft column-gap könnt ihr diesem Problem begegnen: Wer eine Trennlinie mit einer Breite von 30px möchte, sollte den Spaltenabstand über column-gap auf mindestens 30px, besser auf 40px oder 50px setzen, damit der Inhalt nicht direkt an der Linie klebt.

COLSPAN für mehrspaltiges Layout

Interessant wird das Multi-column Layout durch die Eigenschaft column-span. Sie erinnert an das HTML-Attribut colspan in Tabellen. Allerdings hat column-span nur zwei potentielle Werte: none und all, also ganz oder gar nicht. Über all wird ein Block-Element innerhalb eines mehrspaltigen Elements über die ganze Breite und über alle Spalten hinweg dargestellt.

Dies ist allerdings nicht die einzige Auswirkung. column-span trennt den Inhalt in einen Block vor und einen Block hinter dem überspannenden Element auf. Die Blöcke werden dann jeweils in drei Spalten dargestellt. Das ermöglicht, lange Textpassagen über column-span zusätzlich in Zeilen zu unterteilen.

Opera unterstützt auch hier die Standarschreibweise. Safari und Chrome stellen column-span mit dem -webkit-Präfix richtg dar. Firefox steigt hier leider wieder aus, was für die praktische Anwendung und generell für die Tauglichkeit der mehrspaltigen Darstellung Konsequenzen hat. Dies beleuchtet der Praxistest weiter unten.

Spaltenauffüllung und Umbrüche in Spalten

Der Vollständigkeit halber seien hier column-fill und break-after, break-before und break-inside erwähnt. column-fill steuert dabei, ob der Inhalt gleichmäßig auf alle Spalten verteilt wird oder die Spalten einfach von links nach rechts mit dem Inhalt aufgefüllt werden. Dies greift allerdings nur, wenn für das mehrspaltige Element eine Höhe definiert ist (und höher ist, als der darin befindliche Inhalt).

Die Eigenschaften break-after und break-before erzwingen oder unterdrücken je nach Wert Umbrüche am Anfang beziehungsweise am Ende einer Spalte. break-inside steuert das Verhalten eines Block-Elements, das in einem mehrspaltigen HTML-Element liegt. Der interessanteste Wert für break-inside ist sicher avoid, darüber wird der Umbruch in einem Element verhindert, sodass dieser zusammenhängend innerhalb einer Spalte dargestellt wird.

Da diese vier Eigenschaften jedoch ausschließlich vom Opera unterstützt werden, sind sie für eine browserübergreifende Webentwicklung heute noch nicht brauchbar.

Nicht direkt dem Multi-column Layout zugeordnet, aber trotzdem relevant für Umbrüche sind die CSS-Eigenschaften aus dem Bereich Paged media.page-break-after, page-break-before und page-break-inside steuern vergleichbares Umbruchverhalten im Seitenausdruck. Über page-break-inside könnt ihr ebenfalls vermeiden, dass ein zusammengehöriger Block auseinander gerissen wird.

Relevant sind auch die Eigenschaften widows (Witwen oder auch Schusterjungen) und orphans (Waisen oder auch Hurenkinder) für den Druck. widows steuert, dass bei einem Seitenumbruch mehrere Zeilen am Seitenfang ausgedruckt werden, orphans ist das Gegenstück und sorgt dafür, dass am Seitenende zusammengehörige Zeilen gedruckt werden. Allerdings ist auch hier die Browserunterstützung mäßig, die Eigenschaften aus der Paged Media Kategorie werden nur von Opera und Internet Explorer richtig dargestellt.

Der Praxistest: Multi-column-Layout-Eigenschaften im Zusammenspiel

Die Praxistauglichkeit zeigt sich, wenn man alles »zusammenwirft«. Der Praxistest fand an der Webseite vorher.celsius-fahrenheit.de/ (Stand vor der Umsetzung) statt.

Der Einsatz von column-count: 3 und column-width: 250px (mit allen Schreibweisen für Firefox und die Webkit-Browser) ist unproblematisch, der Inhalt sortiert sich sauber in die drei Spalten. Auch die Kombination der beiden Eigenschaften in columns war problemlos. Da Firefox die Kurzschreibweise ignoriert, wurden hier die einzelnen Angaben belassen.

Was positiv ist, dass bei einer 800er Auflösung durch die »Mindestbreite« column-width statt drei automatisch zwei Spalten angezeigt werden (der Inhalt ist insgesamt über eine max-width auf 100% begrenzt und wirft erst bei einer Auflösung ab weniger als 650px Breite Scrollbalken). Auch wenn die saubere Darstellung bei einer 800er Auflösung nicht mehr als »Mindestanforderung« gilt, sollte ein Blick »nach hinten« nicht vergessen werden. Merkmal einer barrierefreien Seite ist, dass sie sich den Benutzereinstellungen anpasst.

Über column-rule werden die Trennlinien definiert, was so unspektakulär ist wie ein Rahmen an einer Tabelle. Mit Ausnahme der IEs werden Trennlinien so sauber wie border unterstützt.

Problematisch zeigt sich allerdings die Länge der Seite. Bei einer 1024er Fenstergröße streckt sich der Inhalt und damit die Spalten über circa 2 1/2 Fenstergrößen. Um die erste Spalte zu lesen, muss die Seite bis ans Ende gescrollt werden. Danach muss der Nutzer zum Anfang der zweiten Spalte nach oben scrollen. Das ist tabu und ist ein klares Ausschlusskriterium.

Multi-column Layout: Eine reine Darstellungseigenschaft

In diesem Zusammenhang muss man sich der Auswirkung der Mehrspaltigkeit bewusst sein: Sie beeinflusst ausschließlich die optische Darstellung. Es wird keine Semantik des HTML vorgegaukelt, es hat auch keinen Einfluss auf die Auffindbarkeit einer Seite für Suchmaschinen, die Ausgabe über Screenreader oder Vergleichbares. Von daher kann die Technik durchaus eingesetzt werden, auch wenn nicht für alle Browser, um eine Seite optisch ansprechender zu gestalten.

Was nicht passieren darf, dass die Bedienbarkeit einer Webseite dadurch verschlechtert wird. Muss der Besucher zum Lesen eines zusammenhängenden Textes mehrmals rauf-und-runter scrollen, liegt definitiv eine Verschlechterung vor und der Einsatz von Eigenschaften zur Mehrspaltigkeit muss kritisch hinterfragt werden.

An der Stelle kommt column-span zu tragen. Der Inhalt von www.celsius-fahrenheit.de hat nach allen zwei bis vier Textabschnitten eine Zwischenüberschrift. Diese werden auf column-span: all gesetzt, damit überspannen sie den Text und die Blöcke dazwischen werden jeweils dreispaltig angezeigt. Bei einer 1024er Auflösung nehmen die Inhaltsblöcke ca. die Hälfte der Fenstergröße ein. Das ist OK.

Da Firefox column-span nicht unterstützt (siehe firefox.celsius-fahrenheit.de/), laufen hier die Spalten nach wie vor über die ganze Seitenlänge und erfordert zum Lesen mehrfaches Auf- und Ab-Scrollen. Nun stehen Webworker vor der Wahl: Entweder wird diese Darstellung nur für Opera, Safari und Chrome abgeboten, oder der Quelltext muss um DIVs erweitert, welche die Textblöcke zwischen den Überschriften umschließen, um das mehrspaltige Layout auf diese Blöcke definieren zu können. Letzteres wurde auf www.celsius-fahrenheit.de umgesetzt. Was aber gleichzeitig bedeutet, dass damit der Einsatz von column-span überflüssig geworden ist.

Fazit

Der browserübergreifende Einsatz von CSS-Eigenschaften für die mehrspaltige Darstellung eines HTML-Elements ist heute noch nicht möglich. Allerdings könnt ihr für Firefox, Opera, Safari und Google Chrome mehrspaltiges Layout einsetzen.

Für Opera, Safari und Chrome können Inhalte durch »überspannende« Elemente in horizontale Blöcke unterteilt werden und führt zu guten Ergebnissen.

Solange eine Webseite browserkompatibel sein soll, müsst ihr für den Einsatz dieser Eigenschaften darauf warten, bis eine weitreichende Unterstützung gegeben ist.

Wer das Verhalten einsetzen möchte, um Inhalte für einzelne Browser anders anzubieten, oder wer eine Webseite nur für einen Browser optimiert muss, kann für Opera und die Webkit-Browser bereits diese durchaus attraktive Möglichkeit einsetzen.

*) Es werden in diesem Artikel die Versionen Opera 11, Internet Explorer 9, Firefox 7, Safari 5 und Google Chrome 14 behandelt. Die einzelne Browserversionen würde hier den Rahmen sprengen und zu Lasten der Verständlichkeit gehen.

Weiterführende Informationen

CSS Multi-column Layout Module (W3C)