Wie der Browser entscheidet

Zwei Regeln sagen etwas Verschiedenes über dasselbe Element. Welche gilt?

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 das erste C in CSS steht dafür.

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. 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, steht in Lektion 3.4.

Drittens die Spezifität. Ein genauerer Selektor schlägt einen allgemeineren. Das ist die Stufe, an der die meisten Konflikte hängen, und sie bekommt in Lektion 3.2 eine eigene Rechnung.

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 Stärke.
   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: rot gewinnt. Tausch die beiden Blöcke und die Seite wird blau.

Schalt den Inspector ein, zeig auf den Absatz und geh im Auskunftsstreifen auf den Reiter „Regeln”. Dort stehen 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”. Genau die vierte Stufe, in einem Halbsatz.

02 / 04Der Browser hat schon eine Meinung

Bevor deine erste Regel greift, hat der Browser die Seite bereits 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.

Der Reiter „Regeln” zeigt hier die Grenze des Werkzeugs, und sie passt zur Lektion. Zeig auf die erste Überschrift: Dort 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; es ist die einzige der vier Stufen, die unsichtbar bleibt. Deshalb steht dort, wo gar nichts von dir gilt, ein Satz statt einer leeren Liste: „Keine Regel aus deinem Stylesheet sagt etwas über dieses Element. Was du siehst, sind die Vorgaben des Browsers.”

Das ist der Grund, warum du beim Gestalten nie bei null anfängst. 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 der häufigste Halbsatz in CSS-Erklärungen, und so allein ist er 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.

Der Reiter „Regeln” schreibt es aus. 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)”. Zeig danach auf den Absatz neben der Karte: Dort dreht sich die Liste um, p gewinnt, 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.

Genau darin steckt die Falle. Du schiebst eine Regel ans Ende der Datei, es passiert nichts, und du fängst an, an dir zu zweifeln. In Wirklichkeit hast du an der falschen Stufe gedreht.

04 / 04Was das für die Fehlersuche bedeutet

Wenn eine Regel nicht greift, ist die Frage nie „warum funktioniert CSS nicht”, sondern: auf welcher Stufe habe ich verloren?

Diese Frage lässt sich beantworten, und zwar in einer festen Reihenfolge. Der Reiter „Regeln” beantwortet sie für jedes einzelne Element, denn genau das steht neben einer durchgestrichenen Zeile: auf welcher Stufe sie verloren hat. Lektion 3.5 baut daraus einen Ablaufplan, mit dem du jeden Stilkonflikt in drei Schritten auflöst. 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.