Visual Lab: Kaskade, Spezifität, Box-Modell, Fluss – sichtbar gemacht

Die vier Instrumente

1. Kaskaden-VisualizerBis zu sechs Regeln auf ein Element. Der Visualizer sortiert nach Herkunft, !important, Spezifität und Reihenfolge und markiert die Gewinnerin.Kaskade
2. Spezifitäts-DuellZwei Selektoren, zwei Tupel. Wer gewinnt, und an welcher Stelle des Tupels es entschieden wird.Selektoren
3. Box-Modell in Schichten„Warum ist diese Box 342px breit?“ Inhalt, Innenabstand, Rahmen, Außenabstand – jede Schicht einzeln, die Summe gerechnet.Box-Modell
4. Normaler FlussBlock, Inline, Inline-Block, Float, Clear: was Elemente ohne jede Positionierung tun, und was ein einziger Wert daran ändert.Visuelle Formatierung

Wozu ein Labor, wenn es eine Referenz gibt?

Eine Referenz sagt, was eine Eigenschaft tut. Sie kann nicht zeigen, was passiert, wenn zwei Regeln kollidieren, wenn ein Außenabstand mit dem nächsten zusammenfällt oder wenn eine Box ihre Breite aus vier verschiedenen Angaben zusammensetzt. Das sind Zusammenhänge, keine Eigenschaften, und sie werden verständlich, wenn man an ihnen dreht. Die Instrumente hier tun genau das: Sie rechnen vor, was der Browser rechnet, und zeigen jeden Zwischenschritt.

Alle vier funktionieren ohne Anmeldung und speichern nichts. Ohne JavaScript zeigen sie ein festes Beispiel mit demselben Ergebnis, das der Text erklärt.

Wie man ein Instrument liest

Alle vier arbeiten nach demselben Muster. Oben stehen die Stellschrauben – Auswahlfelder, Regler, Eingabezeilen –, darunter die Probe, an der sich die Wirkung zeigt, und daneben oder darunter die Auswertung in Zahlen. Der wichtigste Teil ist die Auswertung: Sie nennt nicht das Ergebnis, sondern den Weg dorthin, also die Rechnung, die Sortierung oder die Position, an der eine Entscheidung fällt.

Die Zahlen stammen dabei nicht aus dem eingegebenen Quelltext, sondern aus dem, was der Browser daraus gemacht hat. Das ist ein wesentlicher Unterschied, denn zwischen beidem liegen mehrere Schritte: die Kaskade wählt aus, die Vererbung füllt Lücken, relative Angaben werden in absolute umgerechnet, und erst danach steht fest, was gilt. Ein Instrument, das den Quelltext auswertet, würde die verbreitetsten Irrtümer gerade nicht sichtbar machen – nämlich die, bei denen etwas ganz anderes gilt als das, was dasteht.

Deshalb lohnt es sich, auch bewusst falsche Eingaben zu machen. Eine Regel, die nichts bewirkt, ist lehrreicher als eine, die tut, was man erwartet hat: Sie zeigt, an welcher der vier Stufen sie ausgeschieden ist.

Ohne JavaScript und ohne Konto

Die Instrumente brauchen ein Skript, um zu rechnen, aber die Seiten funktionieren auch ohne. Statt der Bedienelemente erscheint dann ein festes Beispiel mit ausgeschriebenem Ergebnis – dasselbe Beispiel, das der Text darunter erklärt. Wer die Seite ausdruckt oder mit einer Sprachausgabe liest, bekommt also den vollständigen Inhalt und keine leere Fläche.

Gespeichert wird nichts. Es gibt kein Konto, keine Anmeldung und keine Übertragung der Eingaben an einen Server: Was in ein Eingabefeld getippt wird, verlässt den Browser nicht. Nur die Übungen merken sich, welche Aufgabe gelöst ist, und auch das ausschließlich im Speicher des Browsers, in dem sie gelöst wurde.

In welcher Reihenfolge man sie durchgeht

Eine feste Reihenfolge gibt es nicht, aber eine, die sich bewährt hat. Am Anfang steht der Kaskaden-Visualizer, weil die Frage, welche Regel überhaupt gilt, jeder anderen vorausgeht: Wer nicht weiß, warum eine Farbe nicht ankommt, kommt mit dem Box-Modell nicht weiter. Danach folgt das Spezifitäts-Duell, das die dritte Stufe der Kaskade im Einzelnen aufschlüsselt und erklärt, warum ein längerer Selektor nicht automatisch der stärkere ist.

Das Box-Modell kommt an dritter Stelle, weil es keine Frage der Auswahl mehr ist, sondern eine der Berechnung: Die Regel gilt, und trotzdem ist die Box breiter als gedacht. Zum Schluss der normale Fluss, der die drei vorherigen zusammenführt – dort stehen mehrere Boxen nebeneinander, und was jede einzelne tut, hängt davon ab, was ihre Nachbarn tun.

Zeit braucht das nicht viel. Jedes Instrument ist in wenigen Minuten durchgespielt, und der Gewinn liegt weniger im Lesen als im Ausprobieren einer Kombination, die man für unmöglich gehalten hätte.

Wer lieber vom Problem her arbeitet, geht den umgekehrten Weg und nimmt das Instrument, das zu der Frage passt, die gerade offen ist. Jedes steht für sich und setzt keines der anderen voraus; die Verweise am Fuß jeder Seite führen zu dem Grundlagenartikel, der dasselbe in Worten erklärt, und zu den Übungen, in denen dieselben Zusammenhänge geprüft statt vorgeführt werden.