Kommentare, Fehler und was der Browser verwirft

Wie HTML repariert auch CSS seine Fehler still, nur anders. Was der Browser nicht versteht, lässt er kommentarlos weg. Ohne das zu wissen, suchst du lange an der falschen Stelle.

01 / 04Notizen für später

<div class="karte">
  <h2>Projekt eins</h2>
  <p>Eine kurze Beschreibung.</p>
</div>

/* Die Karte: Rahmen und Luft nach innen.
   Der Wert 24px kommt aus der Abstandsskala. */
.karte {
  border: 1px solid #d4d4d8;
  padding: 24px;
  /* background-color: #fafafa; */
}

/* */ ist der einzige Kommentar in CSS. Er darf über mehrere Zeilen gehen, es gibt keine Variante für eine einzelne Zeile wie // in JavaScript. Schreibst du trotzdem //, hast du keinen Kommentar, sondern einen ungültigen Selektor, und die Regel dahinter fällt weg.

Zwei Anwendungen, beide alltäglich. Die eine ist die Notiz, warum diese Zahl hier steht oder welcher Sonderfall abgefangen wird. Die andere steht in der letzten Zeile des Beispiels: eine Deklaration, die vorübergehend stillgelegt ist, ohne gelöscht zu sein. Ohne die Kommentarzeichen bekommt die Karte ihren Hintergrund zurück.

Geheim sind Kommentare nicht. Sie stehen in der ausgelieferten Datei, und jeder kann sie lesen. Schachteln lassen sie sich auch nicht. Ein /* innerhalb eines Kommentars endet beim ersten */, und der Rest steht plötzlich wieder als Code da.

02 / 04Der Browser verwirft still

Im zweiten Beispiel stecken drei Fehler.

<div class="karte">
  <h2>Projekt eins</h2>
  <p>Eine kurze Beschreibung.</p>
</div>

.karte {
  border: 1px solid #d4d4d8
  padding: 24px;
  backgroundcolor: #fafafa;
}

h2 {
  font-size: 40;
  color: #b91c1c;
}

Die Karte auf der Seite hat keinen Rahmen und keinen Innenabstand. Die Überschrift ist zwar rot, aber nicht größer. Und der Browser meldet nichts, weder auf der Seite noch in der Console.

Der Editor unterstreicht eine Stelle gepunktet, den Doppelpunkt in der Zeile nach dem fehlenden Semikolon. Den Tippfehler in backgroundcolor und die fehlende Einheit erkennt er nicht. Für die Grammatik ist beides gültiges CSS, nur eben eines, mit dem der Browser nichts anfangen kann.

Das ist Absicht. CSS ist so entworfen: Kennt ein Browser eine Eigenschaft nicht, überspringt er die Zeile und macht weiter. Nur deshalb kann man neue Eigenschaften benutzen, ohne dass ältere Browser mit einer weißen Seite aussteigen. Der Preis dafür ist, dass ein Tippfehler genauso still verschwindet wie eine noch unbekannte Eigenschaft.

Das fehlende Semikolon hinter border nimmt die nächste Deklaration mit. Der Browser liest beide Zeilen als einen Wert, kann damit nichts anfangen und wirft beide weg. Deshalb fehlt der Rahmen und auch der Innenabstand.

Die falsch geschriebene Eigenschaft backgroundcolor kostet nur sich selbst. Der Browser kennt sie nicht und verwirft die Deklaration. Der Rest des Blocks bleibt stehen.

Die fehlende Einheit bei font-size: 40 kostet ebenfalls nur sich selbst. 40 allein ist keine Größe, also verwirft der Browser die Deklaration. Die Farbe darunter bleibt stehen, weil das Semikolon da ist. Zahlen brauchen in CSS fast immer eine Einheit. Die Ausnahmen sind wenige, und du lernst sie einzeln kennen, etwa line-height: 1.6 oder z-index: 10.

Der Auskunftsstreifen des Inspectors hat zwei Reiter. In „Werte“ steht das Ergebnis, also die Zahlen, die am Ende gelten. In „Regeln“ steht, woher sie kommen: jede Regel aus deinem Stylesheet, die gewinnende oben, überstimmte Zeilen durchgestrichen mit dem Grund daneben, und Regeln für andere Elemente blass.

An der Karte steht im Reiter „Werte“ des Inspectors padding: 0px und border: 0px none rgb(0, 0, 0), die Vorgaben des Browsers, so als läge überhaupt kein Stylesheet daneben. An der Überschrift steht color: rgb(185, 28, 28), aber font-size: 24px, die Größe, die der Browser einer h2 von sich aus gibt.

Im Reiter „Regeln“ wird es noch deutlicher. An der Karte steht dort nur die Regel h2, blass mit „Selektor trifft nicht“. Deine Regel .karte fehlt ganz, obwohl sie noch in der Datei steht. Von ihrem Inhalt ist nichts übrig geblieben, und eine leere Regel zeigt der Reiter nicht. An der Überschrift steht h2 mit genau einer Zeile, color. Die Größe fehlt dort, als hättest du sie nie geschrieben.

03 / 04Die geschweifte Klammer ist der verwirrendste Fall

<div class="karte">
  <h2>Projekt eins</h2>
  <p>Eine kurze Beschreibung.</p>
</div>

<h2>Weitere Projekte</h2>
<p>Kommt bald.</p>

.karte {
  border: 1px solid #d4d4d8;
  padding: 24px;

h2 {
  color: #b91c1c;
}

p {
  color: #52525b;
}

Hier fehlt genau ein Zeichen, die schließende Klammer der ersten Regel. Und diesmal verschwindet nichts. Es passiert etwas Verwirrenderes.

Auf der Seite hat die Karte ihren Rahmen, ihre Überschrift ist rot, ihr Absatz grau, alles wie bestellt. Die Überschrift unter der Karte und der Absatz darunter sind dagegen schwarz geblieben, obwohl die beiden Regeln h2 und p ganz allgemein gemeint sind.

Ohne die Klammer ist die Regel für .karte nie zu Ende. Alles, was danach kommt, liest der Browser als Teil dieser Regel. Seit Ende 2023 kennen alle großen Browser verschachtelte Regeln, und deshalb ist ein h2 { ... } mitten in einem Block gültig. Aus deinen beiden eigenständigen Regeln werden so Unterregeln der Karte, die nur noch für h2 und p innerhalb von .karte gelten. Verschachtelung ist ein nützliches Werkzeug, in Lektion 15.2 setzt du sie mit Absicht ein. Hier ist sie dir aus Versehen passiert.

Im Inspector siehst du das direkt. An der Überschrift in der Karte steht im Reiter „Regeln“ & h2 mit color: rgb(185, 28, 28). So sieht eine verschachtelte Regel aus. Das kaufmännische Und hast du nie geschrieben. Der Browser hat es beim Einsortieren dazugesetzt, und es steht für „die Regel drumherum“. An der Überschrift unter der Karte steht dieselbe Regel blass, mit dem Vermerk „Selektor trifft nicht“. Weg ist sie also nicht. Sie meint diese Überschrift nur nicht mehr.

Der Editor unterstreicht hier übrigens die letzte Klammer der Datei, ganz unten, denn erst dort fällt auf, dass eine fehlt. Erkennen lässt sich der Fehler auch ohne Inspector. Wirken Regeln plötzlich nur noch in einem Teil der Seite und überall sonst nicht, fehlt weiter oben eine schließende Klammer. Ich suche dann nicht bei der Regel, die nicht wirkt, sondern bei der letzten, die noch gewirkt hat.

04 / 04Die drei Fragen bei “es passiert nichts”

1. Trifft der Selektor überhaupt? Klasse falsch geschrieben, Element woanders im Baum.
2. Ist die Deklaration gültig? Tippfehler, fehlende Einheit, fehlendes Semikolon in der Zeile davor.
3. Gewinnt eine andere Regel? Darum geht es ab Abschnitt 3.

Alle drei siehst du im Reiter „Regeln“, und sie sehen verschieden aus. Trifft der Selektor nicht, steht die Regel blass da mit dem Vermerk daneben. Ist die Deklaration ungültig, steht sie gar nicht da, so wie eben in der leeren .karte. Und gewinnt eine andere Regel, ist die Zeile durchgestrichen, und der Grund steht dabei.

Beim zweiten Fall hilft der Reiter nur halb. Er liest die Regeln aus dem Browser, und dort kommt eine verworfene Zeile gar nicht erst an, weil der Parser sie schon beim Lesen wegwirft. Die Entwicklerwerkzeuge deines Browsers (englisch DevTools) lesen dagegen deinen Rohtext mit und können eine ungültige Zeile deshalb durchgestrichen und mit einem Warnsymbol zeigen. In Lektion 16.3 geht es um diese Werkzeuge.

In der Aufgabe steht ein Stylesheet, in dem drei Deklarationen still verloren gehen, jede aus einem anderen Grund.