CSS - die Geheimlehre der verbotenen Kästen

Ist CSS einfach? Noch vor zwei Jahren hätte ich geantwortet: Ja klar. Von schnellen Erfolgen berauscht, war ich der Meinung, jeder könne es lernen. Mittlerweile sind meine Aussagen vorsichtiger geworden... Genaugenommen ist CSS sogar schwieriger als Programmieren (in PHP; Java oder was auch immer), da es keiner durchgängigen Logik folgt. Vielmehr besteht das Lernen aus lauter Ausnahmen. Ein vielleicht passendes Bild ist dafür, eine fünfköpfige Familie nicht nur zu ernächren, sondern auch die Vorlieben jedes Einzelnen zu kennen und beim Familienausflug dafür zu sorgen, dass alle zufrieden sind. Für Timmi gibts ne Rutsche, für Pappa nen Fernseher, der aber nicht zu laut ist, damit Maria nicht genervt ist usw. Wer solche Herausforderungen mag, der wird als CSS-Coder höchstwahrscheinlich sein Glück finden.

Der Weg durchs Dickicht

Damit dieser Artikel aber auch praktischen Nutzen hat, hier ein paar Tips und Resourcen, die es möglich machen, tabellenlose Layouts zu erstellen und  Bändiger der horizontalen Listen zu werden. Es gibt verschiedene Ansätze, von denen einer YAML ist - Sehr umfassende Stylesheets, kompatibel bis Internet Explorer 5 werden angeboten, und man erstellt sein Layout tendenziell durch Weglassen.

Ich hab das nie gemocht. Getreu dem Grundsatz "in Badelatschen zum Nordpol", also mit möglischst geringen Mitteln und wirklich von der Pike auf, hat es mir Layoutgala sehr angetan. Der italienische Coder, der sogar so bescheiden war, seinen Namen nicht auf die Seite zu schreiben ;) verfolgt ein klasse Prinzip. Genau wie beim CSS Zen Garden gibt es ein Grund-Html-Gerüst, das für alle vierzig Layouts gleich ist. Nur durch CSS werden die fünf Kästen nun positioniert. (wobei Header und Footer eigentlich immer gleich bleiben, interessant sind nur Inhaltsbereich und zwei Zusatzblöcke).

Learnig by waiting

Solche oder ähnliche Frameworks geben einem erst mal einen Anfang, und alles funktioniert. Dann kann man sich weiter vortasten. Wichtig finde ich, daß alles möglichst einfach gehalten ist, damit man eine Chance hat, es auch zu verstehen. Daher Layoutgala. Der Autor wollte so wenig Styles wie möglich verwenden, und es ist ihm gelungen. Ein paar grundlegende Techniken muss man verstehen: Wie werden Floats positioniert, wann muss man den Float wieder clearen (clear: left, right oder both) damit einem nichts aus einem Kasten rausflutscht und Ärger macht. Dann sind negative Margins ein fantastisches Mittel, das verblüfft (und nicht mehr IE 5 kompatibel ist: der versteht keine negativen Margins. Aber bitte, IE5?). Und schliesslich horizontale Listen und Listen überhaupt. Die sind aber fast noch schwieriger als Floats zu beherrschen. Allerdings gibt es auch hier eine wunderbare Tutorial-Seite:  Listamatic. Das dort zusammengetragene Wissen ist unglaublich, und die Beispiele obendrein schön und motivierend. Mit diesem Handwerkszeug im Gepäck kann man den Survival-Trip durchaus wagen.

Fortsetzung folgt.