Posts mit dem Label CSS werden angezeigt. Alle Posts anzeigen
Posts mit dem Label CSS werden angezeigt. Alle Posts anzeigen

Freitag, 28. September 2007

Floating divs war 2.0 - Grids sind 3.0

Es soll ja Leute geben (zu denen ich mich ebenfalls zähle), die zwar die ideologische Umwälzung von den alten Tabellenlayouts hin zu modernen, CSS-basierten Webseitenlayouts mitgemacht haben, aber nie wirklich überzeugt waren von dem neuen Gold, das da allenthalben angepriesen wurde. Ich gehe sogar so weit zu behaupten: Floatende div-Bereiche sind um keinen Haarbreit besser oder semantischer oder barrierefreier als rahmenlose Tabellen. Denn ebensowenig wie Tabellen für Seitenlayouts gedacht sind, ist die Funktionalität, eine Box links oder rechts von anderem Inhalt umfließen zu lassen oder auch mehrere Boxen auf diese Weise horizontal aneinanderzureihen, für ganze Seitenlayouts gedacht, sondern eher für Aufgaben wie die Platzierung einer Grafik oder eines Kastens mit Zusatzinformation im Fließtext. Irgendwann, da bin ich sicher, wird eine neue Generation von Webdesignern genauso gegen die heutigen float-Verrenkungen zu Felde ziehen, wie es die Armee der Float-Jünger heute gegen die bösen blinden Tabellen tut. Und dabei werden ganz ähnliche Argumente verwendet werden.

Mittlerweile zeichnet sich auch ab, welches das das neue Layout-Paradigma sein wird. Die Blogspatzen pfeifen es bereits von den Dächern. Anlass ist eine neue Working Draft des W3-Konsortiums vom 5. September 2007, die dank einiger aussagekräftiger Grafiken außergewöhnlich anschaulich geraten ist. Es handelt sich um das Dokument CSS Grid Positioning Module Level 3. Nun ist CSS 3 wieder mal so ein typisch W3C-bombastisches Vorhaben, bei dem die Gefahr besteht, dass es aus lauter Perfektionsdrang und Angst irgendwas zu vergessen niemals fertig wird. Die Current-work-Seite des W3-Konsortiums zur Weiterentwicklung der Stylesprache CSS lässt jedenfalls erahnen, dass es noch lange dauern wird, bis die zahlreichen geplanten CSS-3-Module einmal endgültige Empfehlungen (Recommendations) sein werden. Der überwiegende Teil der Spezfikationen des modular aufgebauten CSS 3 befindet sich noch (und teilweise schon seit Jahren) im Zustand der Working Draft (also in der Entwurfsphase).

Doch zurück zu der neuen Working Draft über CSS Grid Positioning. Grid bedeutet Raster, und wenn man sich die bereits erwähnten Grafiken in der Working Draft ansieht, fühlt man sich alsbald an gedachte Tabellenlinien oder gar Framesets erinnert. Bei genauerem Hinsehen (bei example 3) bemerkt man jedoch, dass es sich nicht einfach um ein starres Gitternetz handelt. Die Zellen eines Grids sind wesentlich flexibler als Zellen einer Tabelle oder eines Framesets. Eine weitere Besonderheit der Grids ist, dass mit ihnen eine neue, relative Maßeinheit in CSS eingeführt wird: gr. So kann man einem Element in seiner CSS-Definition beispielsweise eine Breite von 4gr verpassen. Das bedeutet, dass sich das Element in der Breite über vier Grid-Spalten erstreckt. Indem man ein Grid explizit definiert, erhält man gewissermaßen Hilfslinien, an denen man Inhalte ausrichten kann. Das erspart viel absolutes Positionieren.

Eigentlich ist die Sache mit den Grids eher nachgeschoben und ein Beispiel für den erwähnten Perfektionismus bzw. die Angst, etwas zu vergessen. Es handelt sich um eine Präzisierung von Möglichkeiten, die in dem CSS-3-Modul Multi-column layout bereits beschrieben sind. Mehrspaltige Inhalte, die mit den dort beschriebenen CSS-Eigenschaften definiert werden, werden nun als implizite Grids bezeichnet. Die ersten Entwürfe des W3-Konsortiums für die Mehrspaltigkeit in CSS reichen übrigens ins Jahr 1999 zurück. Auch daran zeigt sich wieder, wie großzügig hier mit Zeiträumen umgegangen wird, während die alltägliche Praxis der Webworker sich mit Krücken der Vergangenheit behelfen muss und sich mit eigentlich sonderbaren ideologischen Grabenkämpfen wie Floats gegen Tabellen die Zeit vertreibt.

Diskussionen zu diesem Eintrag im Webkompetenz-Forum:
Layout (Grids)


Samstag, 9. Juni 2007

Personal Webdesign mit Stylish

Wenn man jenes ominöse Web 1.0, das nie existiert hat, aus der Sicht von Web 2.0, das es ebenfalls nicht wirklich gibt, versucht zu charakterisieren, dann gehört auch dazu, dass das Web 1.0 anbieter-orientiert war, während das Web 2.0 benutzer-orientiert ist. Doch welche Konsequenzen hat das eigentlich fürs Webdesign? Ist ein anbieter-orientiertes Webdesign überhaupt noch zeitgemäß, oder outet sich jemand, der noch auf das unverwechselbare Design seines Webangebots Wert legt, mittlerweile als Ewiggestriger, der noch nicht mitbekommen hat, dass dreiviertel seiner User seine News längst über Feedreader lesen?

Man muss das nicht so radikal sehen, doch es gibt gute Gründe, Gedanken über einen schleichenden Wandel vom anbieter-zentrierten Webdesign zum benutzer-zentrierten Webdesign anzustellen. Die meisten Web-User surfen ja nicht ziellos umher, sondern haben ihre Stamm-Sites, die sie immer wieder besuchen. Die einen tummeln sich den ganzen Tag bei E-Bay, die nächsten bei Xing, wieder andere in den Heise-Foren oder bei Wikipedia. Millionen verbringen nicht wenige Minuten täglich mit Google-Suchergebnissen oder anderen Google-Services. Einige solcher Sites bieten vielleicht gewisse Einstellmöglichkeiten oder sogar verschiedene Skins an. Doch an den Rädchen, die einen persönlich am meisten stören, kann man häufig nicht drehen.

Eine Möglichkeit für benutzer-orientiertes Webdesign bietet die Erweiterung Stylish für den Firefox-Browser. Um damit wirklich individuelle Ergebnisse zu erzielen, sind allerdings Kenntnisse in der Web-Layoutsprache CSS erforderlich. Wer es gerne mal probieren möchte, sollte sich die Stylish-Erweiterung für Firefox installieren. Schauen Sie sich auf den Webseiten von Stylish ruhig auch mal näher um. Sie finden dort etliche bereits vorgefertigte Stylesheets für bekannte Sites. Im Webkompetenz-Forum finden Sie auf der Seite Stylish: see it your way! außerdem eine Kurzanleitung und zwei Beispiel-Stylesheets (eines für Google, eines für SELFHTML)

Diskussionen zu diesem Eintrag im Webkompetenz-Forum:
RSS (Atom) und User-CSS


 

Get Free Shots from Snap.com