Webdesign | Montag, 9. August 2010

CSS3-Spaltensatz

Einige haben es ja schon mitbekommen: Seit ein paar Wochen verändert sich das Layout dieses Blogs, wenn man ein Safari- oder Firefox-Fenster auf eine Breite von mindestens 1600 Pixeln aufzieht. Das passiert mit Hilfe von CSS3- Media Queries, hier beispielhaft dargestellt:

@media only screen and (min-width: 1600px) {
	.wrapper {
		column-count:2;
		column-gap:24px;
		...
	}
}

Mit diesen Anweisungen werden die Einträge (wie gesagt: ab einer Fensterbreite von 1600 Pixeln) mit angepasster Schriftgröße zweispaltig dargestellt – für MSIE- oder Opera-Surfer hier ein Screenshot:

Screenshot

CSS3-Spaltensatz ist mit den aktuellen Browsern allerdings noch nicht wirklich praktikabel, da selbst minimalste Eingriffe in den Umbruch (ich erwähne in diesem Zusammenhang nur Schusterjungen und Hurenkinder) noch nicht möglich sind. In der CSS3-Spezifikation ist die Steuerung von Widows und Orphans zwar vorgesehen, wird bisher aber noch von keinem der mir bekannten Browser unterstützt. Ebensowenig wie die Anweisung, vor oder nach bestimmten Elementen einen Umbruch zu unterdrücken bzw. zu erzwingen. Safari hat dazu mitunter noch arge Probleme mit der korrekten Darstellung von mit dem Text mitfließenden floating divs, und manche Safari-Umbrüche sind logisch nicht ganz nachvollziehbar.

Ich lasse das 1600-Pixel-Multi-Column-Layout aber trotzdem eingebaut. Erstens ist esse est percipi ja auch so etwas wie eine Spielwiese, und zweitens kann man so eben ganz gut beobachten, wie sich zukünftige Browsergenerationen entwickeln.

Wer’s nicht mag, macht das Fenster einfach kleiner.

Meta

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Martin Montag, 9. August 2010, 13:39 Uhr

Jetzt nur noch die Sidebar unter den Content, wenn die Fensterbreite 800px unterschreitet… Sind doch nur paar Zeilen :)

Michael Preidel Montag, 9. August 2010, 13:55 Uhr

@Martin: So ähnlich habe ich’s damals für iOS und Android gemacht: Die Hauptspalte ist 320 Pixel breit und die Seitenleisten rutschen unter den Content.

Aber hier würde das nicht so richtig Sinn machen, weil das Layout insgesamt ja nur 806 Pixel breit ist. Würden die Seitenleisten bei <800 Pixel nach unten rutschen, würde die 420-Pixel-Hauptspalte ziemlich verloren wirken …

Martin Böhm Montag, 9. August 2010, 14:07 Uhr

Ich sehe keine Änderung im Google Chrome (6.0) – muß das so? Ist doch auch Safari, im weitesten Sinne.

Auflösung ist 1600x1200, allerdings geht der Scrollbar von der nutzbaren Breite ab, vielleicht hat das einen Einfluß.

Michael Preidel Montag, 9. August 2010, 14:14 Uhr

Mit der alten Chrome-Version (5.0.342.9 beta), die ich hier habe, werden die Spalten dargestellt. Ich habe die min-width jetzt mal auf 1560px gesetzt, damit solltest du die Spalten auch angezeigt bekommen.

Martin Böhm Montag, 9. August 2010, 14:22 Uhr

Jetzt geht es! Vielen Dank, das ist ist wirklich eine Bereicherung.

Flo Montag, 9. August 2010, 16:31 Uhr

Ich muss Martin zustimmen: Wirklich große Klasse!

Da Stefan Montag, 9. August 2010, 21:42 Uhr

Aha, interessante Lösung. Aber kann es sein, dass dieses Feature das Zoomen auf dem iPad verhindert? Das iPhone bekommt ja eh eine andere Darstellung verpasst… (Sorry für den Mac-lastigen Zwischenruf :))

Boris Dienstag, 10. August 2010, 10:08 Uhr

„…Wer’s nicht mag, macht das Fenster einfach kleiner….“

Hm, also das mag ja deine Website und Spielwiese sein, aber sehr nutzerfreundlich klingt das nicht. ;)

Ich mag deine Website, ich mag auch die zwei Spalten, aber mir gefällt nicht, dass die Schrift auch größer wird. ;)

Und jetzt nur für deine Website mein Browserfenster kleiner machen? Find ich nicht so optimal g

Björn Mittwoch, 11. August 2010, 10:43 Uhr

Wie das Layout und die Typo hier allgemein, sieht das sehr ansprechend aus. Nur für längere Texte weniger geeignet (wenn gescrollt werden muss). Wobei sich das bei zwei Spalten noch relativiert.

Michael Preidel Mittwoch, 11. August 2010, 11:06 Uhr

@Da Stefan: Nein, das liegt daran, dass der viewport nicht gezooomt werden kann – das habe ich wegen des iPhones gemacht. Dass das iPad davon auch betroffen ist, war mir nicht bewusst, ich warte nämlich auf das iPad 2G ;-)

@Boris: Ich habe das deshalb gemacht, weil die Pixeldichte (ppi) neuerer Monitore immer höher wird. Wenn ich mich nicht irre, hat der neue 27"-Monitor von Apple die gleiche Auflösung wie der alte 30". Dadurch wird natürlich alles kleiner, auch die Schriften. Und gerade für die größeren Monitore ist das Layout ja gedacht. Beim normalen 1-spaltigen Layout kann der User die Schriftgröße verändern (rechte Spalte im Navigationskasten), beim 2-spaltigen bisher noch nicht. Aber wenn ich Zeit habe, passe ich die entsprechenden Dateien noch an, dann kannst du deine bevorzugte Schriftgröße selbst einstellen …

Da Stefan Mittwoch, 11. August 2010, 15:22 Uhr

Ah, OK, verstehe. Keine Ahnung, ob man iPhone und iPad getrennt ansprechen kann… Mal suchen.

Johannes Donnerstag, 12. August 2010, 18:35 Uhr

Bin grad ein bisschen verwirrt: Gibt es wirklich Leute die auf 1600px Breite in Vollbild browsen?? dürfte auf 99% der Webseiten ja ziemlich unergonomisch zugehen.
Interessante Sache, das mit den CSS-Spalten.
Grüße vom 1280px breiten Laptop-Monitor.

Michael Preidel Freitag, 13. August 2010, 19:39 Uhr

@Johannes: Ich glaube, Windows-User sind es gewohnt, immer im Vollbild zu browsen (möglicherweise hat Microsoft den Nutzen von Fenstern (Windows! ;-) damals nicht genügend kommuniziert oder gar verstanden. Aber ich kenne auch Menschen, die auf einem 30" Apple-Monitor im Vollbild surfen. Für alle die habe ich das gemacht …