Ich frage mich ob es eine sinnvolle Verwendung eines CSS Frameworks geben könnte, oder ob es überhaupt angebracht wäre so etwas aufzusetzen. Mir kam die Idee bei der Diskussion um JavaScript Frameworks wie Prototype, mootools oder deren Erweiterungen wie scriptaculous. Irgendwie setzt man bei jedem Web das neu entsteht, vieles immer wieder um, und schreibt oder kopiert damit vieles neu, das eigentlich wieder verwendet werden könnte. Yaml bietet hierfür einen ganz guten Ansatz. Leider ist für meine Ansprüche die Vielfalt der vorgegebenen Stylesheets und die Größe mittlerweile wieder nicht mehr annehmbar. Der unbedarfte Nutzer wird sicherlich „vorsichtshalber“ erst alles laden. Was nicht nötig ist. Meine Styles sind daher nichts neues, sondern eben nur ein Neubeginn für mich.

Standardisierung:

Eine Idee wäre also standardisierte CSS Files anzulegen, welche zum Beispiel HTML Elemente generalisieren. Das bedeutet, dass man die von den verschiedenen Browsern unterschiedlich implementierten Margin und Padding auf 0 setzt. Eine generelle Schriftart, Zeilenhöhe und Größe setzt und auch die Rahmen von Bildern wegschaltet.

Wir denken an Browser die fast immer Probleme machen:

Eine Idee, so lange der IE6 noch zu den relevanten Browsern zählt, wäre auch eine Art Korrekturstyle anzulegen, der Darstellungsfehler wie eventuell den 3px floating Bug ausgleicht, oder bei umflossenen Elementen die Listenpunkte in den sichtbaren Bereich schiebt. Beispiele dazu gibt es auf den zahlreichen Seiten die die unzähligen Bugs des IE6 beschreiben genügend.

Weitere Anforderungen an einen Stylesheet:

Weiterhin sollte ein Stylesheet erzeugt werden welches generelle Klassen enthält, die man immer brauchen kann. Wie etwa .visible oder .hidden welche Blockelemente weg- oder sichtbar schalten kann. Das Ganze könnte auch noch Klassen enthalten welche den Fluß brechen, da man dies aber mittels der Pseudoelements :after oder auch :before und content:"" sehr viel schöner in neueren Browsern umsetzen kann, wäre eine Implementierung nur für den IE in dem oben genannten speziellen IE Stylesheet eine bessere Idee. Dazu sollten auch Klassen für kleinere Schriftelemente oder ähnliche Anwendungsbeispiele gesetzt werden.

Implementierung:

Wie aber sollte so eine Implementierung aussehen. Mittels Link alle Styles in den Kopf der Datei einzubinden und dann noch mittels Conditional Comments, welche es uns erlauben ohne Scripting den IE zu erkennen und selektiv mit Stylesheets zu versorgen, würde schnell zu einem unübersichtlichen Code führen. Daher sollte man die Stylesheets zusammen führen. Hierzu gibt es verschiedene Möglichkeiten. Die folgende bietet meiner Meinung nach einen guten Ansatz.

Die Möglichkeit mittels @import ältere Browser gleich völlig auszuschließen sollte daher in Betracht gezogen werden. Wenn man dann noch die Stylesheets strukturiert in einer definierten style.css lädt, hat man eine schöne Struktur, die die Übersicht erleichtert.

Namen die man verwenden könnte wären:

• style.css (als initiale Datei, die alle anderen inkludiert )
• reset.css (korrigiert alle Elemente)
• fonts.css (Schriften)
• forms.css (Layout für Formelemente)
• assets.css (alles was man sonst so standardgemäß benötigt.)
• ie.css (Korrekturstyle für den IE)

Implementiert würde das Ganze dann so aussehen: Testseite

Diese Seite stellt einfache HTML Tags in fast jedem Browser gleich aussehend dar. Eine wunderbare Grundlage um mit CSS ein Design zu starten.

Wenn man sich einmal die Mühe gemacht hat solch eine Struktur aufzusetzen, dann kann man damit recht einfach beginnen eine erste Seite zu erzeugen. Lädt man diese Ressourcen, hat man sofort ein standardisiertes Layout in allen Browsern. Man kann nun beliebige Anpassungen ausführen. Man sollte beachten, dass ich in meinen Beispielen davon ausgehe, dass man flexible Layouts und Schriften wünscht, wie dies auch von den meisten Fachleuten, welche sich mit zugänglichen Layouts beschäftigen, gefordert wird. Daher verwende ich die relative Auszeichnung em wo dies einsetzbar ist.

Erweitert gehören die Stylesheetdateien jetzt auf jeden Fall noch um Layout Styles, welche z.B. die Struktur der Seite abbilden. Da dies aber sehr speziell ist, habe ich solche eine Datei gar nicht erst angelegt. Würde diese dann schon wieder ein spezielles Layout abbilden. Ich werde dies aber gerade bezogen auf Standard Layouts in den nächsten Tagen erweitern. (Spaltigkeit, Bildfluss etc)

Fazit:

Final ist das ganze natürlich überhaupt nicht und eher etwas mickerig. Der Ansatz soll auch eher als Anregung dienen und wenn jemand Lust hat Kommentare zu Erweiterungen zu schreiben, nur zu. Ich nehme das gerne auf. Ich werde in den nächsten Wochen auch ein wenig daran arbeiten.