Weblog

Fast eineinhalb Jahre sind seit dem ersten Public Draft vergangen, in der wir zahlreiche Erfahrungen sammeln und einiges positives Feedback ernten konnten. Bereits seit YAML 3.0 (Juli 2007) kommt das CSSDOC Regelwerk in meinem CSS-Framework zum Einsatz und hat bestens bewehrt.

Die klare und verständliche “Sprache” der Tags erleichtert professionellen Anwendern wie auch Einsteigern den Umgang mit dem Framework. Umso mehr lag es uns allen am Herzen, die vor langer Zeit begonnenen Arbeiten an der Spezifikation weiterzuführen und das Regelwerk zu vervollständigen. Am letzten Wochenende war dieses Ziel mit dem Einflegen der letzten Korrekturen erreicht und den aktuellen Stand in Form eines zweiten öffentlichen Drafts veröffentlicht.

Das Dokument steht als PDF-Datei zum Download bereit und wir bitten jeden CSSDOC-Interessierten ausdrücklich um Feedback über die öffentliche CSSDOC-Mailingliste.

Nachtrag: Dass das Projekt mittlerweile einiges an Ansehen für sich verbuchen kann, äußert sich auch darin, dass beispielsweise die offizielle Drupal-Dokumentation das Regelwerk im Rahmen des Drupal Coding Standard zur Kommentierung von Cascading Stylesheets empfielt.

Und hast Du nicht gesehen, schon überschlägt man sich hier, da und dort mit Artikeln, die vom Beginn einer neuen Webdesign-Ära sprechen, in der die ach so komplizierten Layoutkrücken, welche noch auf Floats oder absoluter Positionierung basieren, nur noch ein Schattendasein fristen werden.

CSSTidy steht aktuell in der Version 1.3 als PHP-Script und als Kommandozeilenversion für Windows zur Verfügung. Die einfache und übersichtliche Benutzeroberfläche erlaubt im Textfeld auf der linken Seite die Übergabe der CSS-Daten per copy/paste oder alternativ den Import von CSS-Dateien über eine URL.

Auf der rechten Seite finden sich einige Optionen, um die Arbeitsweise des Tools zu beeinflussen. Leider führen die standardmäßigen Voreinstellungen schnell zu unbrauchbarem CSS.

Unter den Layout-Frameworks gehört YAML damit zu den Urgesteinen und ist dennoch kein bisschen angestaubt. Verständlicherweise sind die Update-Zyklen mittlerweile etwas größer als noch 2006, doch das liegt im Reifegrad des Frameworks begründet, der nur noch wenige Eingriffe und vor allem eine behutsame und bedachte Weiterentwicklung erfordert. In diesem Zusammenhang fand ich es spannend, Jens Grochtdreis Worte aus seinem damaligen Release-Beitrag in seinem Blog noch einmal zu zitieren:

Dirk erklärt interessant und ausführlich sein Layout, das man auch kompakt herunterladen kann. Sein Layout ist interessant aufgebaut und geht sowohl mit fixen Spaltenbreiten als auch mit flexiblen Spaltenbreiten um. Es bietet sowohl Header als auch Footer, die man auch ausschalten kann. Die Flexibilität seines Layouts ist Programm,  denn Dirk wollte sich eine Basis für künftige Projekte schaffen.

Floats sind interessant und obwohl sie viele Fussangeln aufweisen, layoute ich derzeit nie anders.

Schon in der ersten Version stand der Grundsatz der größtmöglichen Flexibilität – und damit meine ich die Gestaltungsfreiheit bei der Positionierung von Elementen und der Verwendung und Kombination beliebiger Maßeinheiten – an erster Stelle. An der technischen Umsetzung dieser Idee hat sich im Verlauf der 3 Jahre nichts Wesentliches verändert. Die Idee eines grobusten und wiederverwendbaren Layoutkonzepts war damals jedoch weitgehend neu und hat mir einige Diskussionen beschert. Und das macht mich rückblickend schon ein wenig stolz, denn Layout-Frameworks waren 2005 noch weitgehend Neuland. Auch ich musste erst einmal lernen, wie man das Layoutkonzept und das "TOP-DOWN" Prinzip in der Dokumentation verständlich erklärt.

Der linke Teil des Screenshots zeigt, was gemeint ist. Kleine und mittlere Schriftgrößen wirken so, als ob sie generell im Fettdruck gesetzt wurden. Richtig auffällig wird das beispielsweise unter Windows Vista, wenn man die Darstellung im IE7, Firefox oder Opera zum direkten Vergleich heranziehen kann.

Bekannte Bugfixes

Einige schlaue Leute haben zwei mögliche Bugfixes gefunden, die das Problem zuverlässig beseitigen. Auf Jonnotie werden beide Ansätze vorgestellt. Das Ergebnis zeigt der rechte Teil des oben gezeigten Screenshots, der mit dem Safari/Win entstand.

Text-Shadow-Methode

Diese Methode funktioniert im Firefox und im Safari 3.

Opacity-Methode

Diese Methode funktioniert laut Jonnotie auch in der Entwicklerfassung des Safari 4 und wird daher zur Anwendung empfohlen.

Vorsicht bei der Anwendung

Ich habe beide Bugfixes nochmals getestet und kann die Funktion bestätigen. Dennoch rate ich vom Einsatz in der hier gezeigten Form grundsätzlich ab. Der Grund dafür ist die Wahl des Stern-Selektors, wodurch der Bugfix pauschal auf alle Elemente des Layouts angewendet wird. Sowohl im Firefox als auch im Safari führt dieses Vorgehen zu eklatanten Performance-Einbrüchen im Rendering beider Browser. Spürbar wird das besonders, wenn man die Größe des Browserfensters ändert. Beide Browser beginnen bei Seiten mit viel Text massiv an zu ruckeln, selbst auf schnellen Dual-Core-Prozessoren. Speziell auf Notebooks mit schwachen Grafikkarten sind verstärkt Ruckler zu befürchten.

Wer also mit der Textdarstellung unzufrieden ist, und diese unbedingt korrigieren will, sollte dies mit Bedacht tun. Entscheidend für die Performance ist dabei die Größe (Höhe * Breite) der betroffenen Elemente. Ähnlich wie bei der Alpha-Transparenz von PNG-Grafiken wirken sich kleine Elemente kaum auf die Performace aus. Wird der Fix aber großflächig auf z.B. den Inhalt dieses Weblogs angewendet, wird der Performance-Einbruch sehr schnell spürbar und kann auf langsamen Rechnern/leistungsschwachen Grafikkarten (man denke an Notebooks) störend wirken.

Da es in der Regel aber nur Sinn macht, alle Elemente zu korrigieren, rate ich vom Einsatz dieses Fixes eher ab. Wer mit den betreffenden Browsern surft, dürfte sich mit dem Schriftbild arrangiert haben und die zu befüchtenden Performance-Einbrüche auf einigen Rechnern dürften bei den Besuchern eher einen schlechten Gesamteindruck der Seite hinterlassen als dass Sie die schönere Kantenglättung zu schätzen wissen.