Wie der Browser entscheidet

Zwei Regeln sagen etwas Verschiedenes über dasselbe Element, und nur eine kann gelten.

Der Browser rät dabei nicht, und er nimmt auch nicht einfach die, die dir wichtiger war. Er hat eine feste Reihenfolge, nach der er widersprüchliche Regeln gewichtet. Diese Reihenfolge heißt Kaskade, und für sie steht das C in CSS.

01 / 04Vier Stufen, von grob nach fein

Der Browser geht die Stufen der Reihe nach durch und hört auf, sobald eine entschieden hat.

Erstens die Herkunft (origin). Regeln kommen aus drei Quellen: vom Browser, von den Einstellungen der Nutzerin und von dir als Autor. Deine schlagen die des Browsers, und das ist der Normalfall.

Zweitens die Layer. Wenn du deine Regeln in @layer einsortiert hast, entscheidet die Reihenfolge der Layer. Wie das geht, kommt etwas später in diesem Abschnitt.

Drittens die Spezifität. Ein genauerer Selektor schlägt einen allgemeineren, und wie genau, wird in Lektion 3.2 ausgerechnet.

Viertens die Reihenfolge im Dokument. Erst wenn alles davor gleich ist, gewinnt die Regel, die weiter unten steht.

<p class="hinweis">Beide Regeln unten sprechen mich an.</p>

/* Gleicher Selektor, gleiche Spezifität.
   Der Browser nimmt die spätere. */
.hinweis {
  color: #2563eb;
}

.hinweis {
  color: #b91c1c;
}

Zwei Regeln, identischer Selektor. Alles bis zur vierten Stufe ist gleich, also entscheidet die Position, und Rot gewinnt. Stehen die beiden Blöcke andersherum, wird die Seite blau.

Am Absatz stehen im Reiter „Regeln“ des Inspectors beide Regeln untereinander, beide mit derselben Zahl 0-1-0 daneben. Oben die rote, sie gilt. Darunter die blaue, ihre Zeile ist durchgestrichen, und daneben steht der Grund: „überstimmt von der späteren Regel“. Das ist die vierte Stufe in einem Halbsatz.

02 / 04Das Browser-Stylesheet ist die unterste Stufe

Bevor deine erste Regel greift, hat der Browser die Seite schon formatiert. Überschriften sind groß und fett, Listen haben Punkte, Links sind blau und unterstrichen. Das kommt aus dem Browser-Stylesheet, und das ist die unterste Stufe der Herkunft.

<h2>Ohne eigene Regel</h2>
<p>Ein Absatz ohne eigene Regel.</p>
<h2 class="schlicht">Mit eigener Regel</h2>

/* Groß, fett und mit Abstand drumherum: das kommt alles
   vom Browser, nicht von dir. Erst hier wird es überschrieben. */
.schlicht {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

Die erste Überschrift bekommt gar nichts von dir und sieht trotzdem nach Überschrift aus. Die zweite trägt eine Klasse und ist damit auf normale Textgröße zurückgeholt. Im Streifen sind das font-size: 24px, font-weight: 700 und ein margin von rund 20px an der ersten gegen 16px, 400 und margin: 0px an der zweiten.

Im Reiter „Regeln“ siehst du hier, wo das Werkzeug an seine Grenze kommt, und das passt zur Lektion. An der ersten Überschrift steht nur .schlicht, blass und mit dem Vermerk „Selektor trifft nicht“. Keine einzige Regel gilt für dieses Element, und trotzdem ist es groß und fett. Woher das kommt, kann dir der Reiter nicht zeigen. Das Browser-Stylesheet steht in keiner Schnittstelle, an die eine Seite herankommt. Von den vier Stufen ist es die einzige, die unsichtbar bleibt. Deshalb steht dort, wo gar nichts von dir gilt, statt einer leeren Liste der Satz „Keine Regel aus deinem Stylesheet sagt etwas über dieses Element. Was du siehst, sind die Vorgaben des Browsers.“

Darum fängst du beim Gestalten nie bei null an. Du überschreibst immer etwas. Wenn ein Element anders aussieht als erwartet, obwohl du gar keine Regel dafür hast, ist meistens das Browser-Stylesheet die Erklärung.

03 / 04Die spätere gewinnt, aber nur bei Gleichstand

Der Satz „die letzte Regel gewinnt“ ist so allein falsch. Er gilt nur, wenn die Stufen davor unentschieden ausgehen.

<div class="karte">
  <p>Ein Absatz in der Karte.</p>
</div>
<p>Ein Absatz daneben.</p>

/* Steht weiter oben und gewinnt trotzdem:
   eine Klasse plus ein Element schlägt ein Element allein. */
.karte p {
  color: #b91c1c;
}

p {
  color: #2563eb;
}

Hier steht .karte p oben und p unten. Trotzdem ist der Absatz in der Karte rot, nicht blau. Die dritte Stufe hat schon entschieden, die vierte kommt gar nicht mehr dran.

Im Reiter „Regeln“ steht es ausgeschrieben. Am Absatz in der Karte steht oben .karte p mit 0-1-1, darunter p mit 0-0-1, durchgestrichen, und daneben: „überstimmt durch höhere Spezifität (0-1-1)“. Am Absatz neben der Karte dreht sich die Liste um. Dort gewinnt p, und .karte p steht blass darunter, weil sein Selektor hier nicht trifft. Was diese drei Zahlen bedeuten, rechnest du in der nächsten Lektion aus.

Darin steckt die Falle. Schiebst du eine Regel ans Ende der Datei und es passiert nichts, zweifelst du schnell an dir. Dabei hast du nur an der falschen Stufe gedreht.

04 / 04Was das für die Fehlersuche bedeutet

Wenn eine Regel nicht greift, lautet die Frage also nicht, warum CSS nicht funktioniert. Sie lautet, auf welcher Stufe die Regel verloren hat.

Darauf gibt es eine Antwort, und du findest sie immer in derselben Reihenfolge. Im Reiter „Regeln“ bekommst du sie sogar für jedes einzelne Element, denn neben einer durchgestrichenen Zeile steht die Stufe, auf der sie verloren hat. Am Ende dieses Abschnitts wird daraus ein Ablaufplan, mit dem sich jeder Stilkonflikt in drei Schritten auflösen lässt. Vorher fehlen noch zwei Zutaten, die Spezifität als Rechnung und die Layer als Werkzeug, mit dem du die Kaskade selbst ordnest, statt gegen sie anzukämpfen.

In der Aufgabe gewinnt bisher die falsche von zwei Regeln.