CSS-Profi in fünf Schritten

Das Problem kennt wohl jeder Webdesigner: Im Großen und Ganzen kommt man mit HTML und CSS gut zurecht, doch immer wieder verliert man viel Zeit, weil man versucht, Probleme durch Herumprobieren zu lösen. Sie werden jedoch viel schneller vorankommen, wenn Sie Ihr Hintergrundwissen auffrischen und erweitern.

1. Schritt: Positionierung von Elementen

Wenn ein Weblayout nicht so funktioniert wie gedacht, dann experimentieren viele Webentwickler solange mit position, bis es passt. Leichter geht es, wenn Sie die fünf position-Eigenschaften kennen und verstehen: static, relative, absolute, fixed und inherit.

Jedes HTML-Element erzeugt eine Elementbox, die an einen Legostein erinnert, aber viel mehr kann. Elementboxen gibt es in zwei Varianten. Blockboxen stapeln sich im Grundzustand senkrecht übereinander (wie div und <p>), Inline-Boxen neben- und untereinander (etwa span). Ersetzte Elemente wie beispielsweise img zählen wir zu den Inline-Elementen. Über display: block oder display: inline lassen sich Elemente in den einen oder anderen Modus schalten. position lässt sich auf Inline-Boxen anwenden, findet aber zumeist Verwendung bei der Positionierung von Blockboxen. Der Grundzustand ist static und führt zu dem oben beschriebenen Verhalten. Die Abstandseigenschaften top, right, bottom und left haben auf static positionierte Boxen keine Wirkung.Ohne weiteres CSS führt position: relative zum selben Anzeigeergebnis wie position: static. Tatsächlich verleiht es einer Box aber zusätzliche Kräfte. Sie lässt sich mit den Abstandseigenschaften relativ zu ihrer natürlichen Position verschieben. Nachfolgende Boxen verhalten sich dabei so, als wäre die relativ positionierte Box noch an ihrer ursprünglichen Position.

Anders ist das bei position: absolute. Eine so positionierte Box rutscht in die linke obere Ecke des nächsten Elternelementes, das für position einen anderen Wert als static aufweist (zum Beispiel relative). Gibt es kein solches, dient das Wurzelelement html als Ersatz, also die obere linke Ecke des Browserfensters.Von dieser Nullposition aus lässt sich die Box mit den Abstandseigenschaften verschieben. Absolut positionierte Elemente haben keinen Einfluss auf die Positionierung nachfolgender Boxen.Durch Vorgabe von top und bottom beziehungsweise left und right können Sie die Höhe und Breite absolut positionierter Boxen ohne width und height bestimmen. Tipp: absolute etabliert genauso wie relative einen eigenen Stacking-Kontext. Das wird dann wichtig, wenn Sie Elemente in der Tiefe, also auf der Z-Achse, stapeln wollen.

2. Schritt: Floats

Blockboxen erzeugen immer eine neue Zeile - es sei denn, sie sind mit float: left oder float:right nach links beziehungsweise rechts gefloatet. Eine Box rutscht durch float: left an den linken Rand des Elternelements und erlaubt einer anderen Box, an ihren rechten Rand anzudocken. Diese Technik kennt jeder Webdesigner, der schon einmal ein Bild von Text hat umfließen lassen:

Interessanterweise umschließt die p-Box das Bild, auch wenn der Text es umfließt. Will man etwas Abstand zwischen Text und Bild einfügen, muss margin deshalb immer dem Bild und nicht dem Absatz zugeordnet werden. Indem Sie dem Absatz einen Rand hinzufügen, sehen Sie, was im Hintergrund passiert.Nun wollen Sie zum Beispiel mit Hilfe von Floats mehrere Produkte eines Online-Shops in Form von Kacheln neben- und untereinander anzeigen. Alle Kacheln werden von einem div umgeben, dem Sie einen roten Rand geben. HTML und CSS (Auszug):

...

Dabei entsteht aber nicht der erwartete Rahmen, sondern eine vier Pixel hohe, rote Linie über der ersten Kachelreihe. Enthält eine Box ausschließlich gefloatete Elemente, ist ihre Höhe gleich Null.Beheben lässt sich das auf verschiedene Weise. Am einfachsten ist es, wenn Sie das Attribut overflow des umgebenden div auf hidden oder auto setzen. Ist das nicht möglich, verwenden Sie Gallaghers Micro Clearfix Hack .Ein weiteres Problem entsteht, wenn die Kacheln unterschiedlich hoch sind. Floats fließen laut CSS-Definition nicht nur so weit nach links beziehungsweise rechts wie möglich. Sie fließen vor allem so weit nach oben, wie es geht.Das Problem lässt sich durch den Verzicht auf Floats zugunsten von display: inline-block (ab IE 7) oder display: table-cell (ab IE8) lösen. Eine kleine Überraschung wartet auf Sie, wenn Sie mehrere Boxen nach rechts floaten. Um beim Beispiel unserer Produktkacheln zu bleiben: Es ist nicht die dritte Produktkachel, die am rechten Rand anschlägt, sondern die erste. Nummer 2 bleibt in der Mitte und Nummer 3 steht ganz links. Floats wirken immer in der Reihenfolge der Elemente im HTML-Code.

3. Schritt: CSS-Selektoren

Natürlich wissen Sie, wie man ein HTML-Element anhand seines Namens, seiner ID oder Klasse(n) auswählt. Wahrscheinlich kennen Sie auch die Eselsbrücke "LoVe-HAte" für die Reihenfolge, in der die Pseudoklassen eines Links :link, :visited, :hover und :active einander überschreiben. Doch nicht wenige Webdesigner tappen im Dunkeln, wenn es um fortgeschrittene Selektoren geht.Zuerst eine kurze Abstammungslehre, damit der Zusammenhang zwischen HTML-Ahnen, -Eltern, -Kindern, -Geschwistern und -Abkömmlingen deutlich wird:

Erst vor diesem Hintergrund wird verständlich, was es mit dem CSS-Kind-Selektor > auf sich hat: Mit div > p selektieren Sie ausschließlich p-Elemente, die Kinder eines div sind. div > a würde in unserem Beispiel ins Leere laufen, da es sich bei a um einen Abkömmling und kein Kind des div handelt. div > p > a würde hingegen funktionieren.Mit + selektieren Sie ein HTML-Element, das auf ein anderes folgt. So selektieren Sie zum Beispiel mit p + p den zweiten Absatz unseres Beispiels. Ganz ähnlich funktioniert die Tilde (~), die alle Geschwister eines bestimmten Elementes selektiert. Vor allem beim Debugging hilfreich ist der Asterisk (*). Sie erwischen zum Beispiel mit div * * p Absätze, die Urenkel von div sind. Kennen sollten Sie außerdem Attributselektoren, mit denen Sie auf bestimmte Werte von HTML-Attributen reagieren können. a[href$="pdf"] selektiert alle Links, die auf PDF-Dokumente verweisen, deren href-Attribut also auf pdf endet. Indem Sie das Dollarzeichen durch ^, * oder ! ersetzen, selektieren Sie Elemente, deren href-Attribut mit pdf beginnt, pdf an beliebiger Stelle oder gar nicht enthält.Sehr nützlich sind Attributselektoren auch beim Design von Formularelementen, lassen sich die verschiedenen input-Typen doch bequem anhand ihres type-Attributes formatieren.

4. Schritt: Effizientes CSS

Webentwickler, die mehr als nur eine Website betreuen, teilen die Erfahrung, dass sie bestimmte, visuelle Konzepte immer wieder programmieren - zum Beispiel Knöpfe, Formulare, "Bild links, Text rechts"-Boxen und so weiter.Gleich drei Konzepte widmen sich der Frage, wie man HTML und CSS so vereinfachen kann, dass es sich wiederverwenden lässt. Das kommt nicht nur der Arbeitsgeschwindigkeit zugute, sondern sorgt auch für schlankeren und damit übersichlicheren und leichter zu erweiternden Code.Der einfachste Ansatz, der ohne Eingriffe in das HTML auskommt, ist DRY CSS. In aller Kürze: Sich wiederholende Formatierungen werden gruppiert und durch mitunter recht ausführliche Selektorenlisten zugeordnet. Das führt zu Konstruktionen wie zum Beispiel:

Führt man ein neues HTML-Element ein, müssen die Selektorenlisten entsprechend ergänzt werden.

Deutlich ausgefeilter sind die Konzepte SMACSS und OOCSS. SMACSS zerlegt CSS in fünf Kategorien: Base enthält Browser-Resets und grundlegende Formatierungen. Layout formatiert die großen Layoutbestandteile, ordnet also zum Beispiel Header, Footer und Spalten an.Module ist das Pendant zu Layout für einzelne Seitenbestandteile, zum Beispiel die oben genannte "Bild links, Text rechts"-Box. State kümmert sich um dynamische Seitenelemente, zum Beispiel ein Akkordeon und dessen Aussehen im ein- oder ausgeklappten Zustand. Theme ist für Farben und die Typographie zuständig. Die Wiederverwendbarkeit von CSS erleichtert SMACSS durch die intensive Nutzung von Klassen und den weitgehenden Verzicht auf Elementselektoren (p), verschachtelte Selektoren (#sidebar p) und IDs. Es lässt diese aber in nach unserem Geschmack sinnvollem Umfang zu.Das SMACSS ähnliche, etwas ältere OOCSS ist hier radikaler und setzt ausschließlich auf Klassen. Seine Kernprinzipien sind einerseits die Trennung von Struktur und Design und andererseits die Trennung von Container und Inhalt.Zum Weiterlesen empfehlen wir Ihnen die drei genannten Links zum Blog von Steven Bradley, der dort alle drei Ansätze diskutiert. Außerdem gibt es da noch unseren Artikel zum Thema "Objektorientiertes CSS".

5. Schritt: Browser-Support

Allen Fortschritten bei der Umsetzung von HTML- und CSS-Standards des W3C zum Trotz ist die Frage "Welche Browser unterstützen XY?" immer noch wesentlich. Das gilt nicht nur hinsichtlich der Verlockungen der mit CSS3 eingeführten Möglichkeiten, sondern auch bei der Nutzung fortschrittlicher CSS-Selektoren.Eine Website, die Sie in diesem Zusammenhang unbedingt in Ihre Lesezeichen befördern sollten, ist caniuse.com. Sie ist zwar nicht die schönste ihrer Art, aber ungemein hilfreich, wenn es darum geht, die Browserunterstützung bestimmter Features zu beleuchten.Außerdem enthält caniuse.com oftmals weiterführende Links. So erfahren Sie zum Beispiel nicht nur, welche Browser CSS3 Gradients rendern, sondern erhalten auch gleich einen Link zu einem passenden Online-Generator für diese Farbverläufe.