CSS-Quiz: Allgemeines – Teil 1

Aufbau: Regel, Selektor, Deklaration

Eine Regel besteht aus einem Selektor und einem Deklarationsblock in geschweiften Klammern. Eine Deklaration besteht aus einer Eigenschaft, einem Doppelpunkt und einem Wert; mehrere Deklarationen werden mit Semikolon getrennt. Diese drei Begriffe sauber auseinanderzuhalten erspart später viel Verwirrung, weil die Spezifikation sie konsequent verwendet.

Ein Stylesheet enthält Regeln und At-Regeln, dazu Kommentare und Leerraum – nichts anderes. Insbesondere enthält es keine Programmlogik: Es gibt keine Verzweigungen und keine Wiederholungen, und die einzige Form von Bedingung ist die At-Regel, die einen Block an eine Medien- oder Unterstützungsbedingung bindet.

Eingebunden wird ein externes Stylesheet über ein Element im Kopf des Dokuments. Der Ort ist vorgeschrieben, und er hat einen praktischen Grund: Der Browser muss das Stylesheet kennen, bevor er zu zeichnen beginnt – sonst erschiene die Seite kurz unformatiert. Genau deshalb ist ein blockierendes Stylesheet im Kopf keine Nachlässigkeit, sondern gewollt.

Was der Browser mit Unbekanntem tut

CSS ist von Grund auf so entworfen, dass ein älterer Browser ein neueres Stylesheet lesen kann. Die Regel dafür heißt vorwärtskompatible Auswertung: Eine Deklaration mit einer unbekannten Eigenschaft oder einem unbekannten Wert wird verworfen – nur diese eine Deklaration, nicht die Regel. Ein unbekannter Selektor verwirft die ganze Regel, eine unbekannte At-Regel den ganzen Block.

Fehlermeldungen gibt es nicht, und genau darin liegt die Stärke wie die Schwäche: Ein Tippfehler bleibt lautlos, aber eine Seite bricht nie an einer Eigenschaft, die der Browser nicht kennt. Darauf beruht die verbreitete Arbeitsweise, zwei Deklarationen hintereinander zu schreiben – erst den Wert, den alle verstehen, dann den besseren. Wer den zweiten nicht kennt, behält den ersten.

Eine Sonderrolle spielt der Verlust einer Gruppe: Steht in einer Selektorliste ein einziger Selektor, den der Browser nicht versteht, verwirft er die gesamte Regel mitsamt allen anderen Selektoren. Deshalb gehören neue Selektoren nicht in eine Gruppe mit alten – und deshalb gibt es die logische Pseudoklasse, die eine unbekannte Auswahl in ihrem Inneren verzeiht.

Längeneinheiten und was em heißt

CSS unterscheidet absolute und relative Längen. Absolut sind Zentimeter, Millimeter, Zoll, Punkt, Pica und das Pixel; relativ sind die Einheiten, die an einer Schriftgröße messen. Auf dem Bildschirm sind die absoluten Einheiten über einen festen Umrechnungsfaktor an das Pixel gebunden und damit keine echten physischen Längen – im Druck sind sie es sehr wohl.

Die Abkürzung em stammt aus dem Bleisatz und bezeichnete die Breite des Buchstabens M, die traditionell der Schriftgröße entsprach. In CSS ist sie ausdrücklich als die Schriftgröße des Elements definiert – und bei der Schriftgröße selbst als die des Elternelements. Genau diese Ausnahme führt zum Aufsummieren in verschachtelten Strukturen.

Bezeichner – Elementnamen, Klassen, Kennungen – dürfen Buchstaben, Ziffern, Bindestrich, Unterstrich und alle Zeichen jenseits des ASCII-Bereichs enthalten. Nicht beginnen dürfen sie mit einer Ziffer oder mit einem Bindestrich, dem eine Ziffer folgt. Der Unterstrich war in CSS 1 ausgeschlossen und wurde erst durch eine Berichtigung erlaubt – eine Geschichte, die das Tutorial zum Unterstrich erzählt.

Der Dokumentstammbaum

CSS arbeitet nicht auf dem Quelltext, sondern auf dem Baum, den der Browser daraus gebildet hat. Jedes Element ist ein Knoten mit genau einem Elternteil und beliebig vielen Kindern; die Wurzel ist das äußerste Element des Dokuments. Selektoren, Vererbung und der ganze Begriff des umschließenden Blocks beziehen sich auf diesen Baum.

Der Unterschied zum Quelltext ist mehr als theoretisch. Der Browser ergänzt fehlende Elemente, korrigiert falsch verschachtelte und wirft ungültige weg – der Baum kann also anders aussehen, als der Quelltext vermuten lässt. Wer einen Selektor schreibt, der nicht greift, sollte deshalb den Baum im Prüfwerkzeug ansehen und nicht den Quelltext.

Nicht aus dem Baum ableitbar sind Dinge, die im Dokument keine Entsprechung haben: der Zustand eines Verweises, die Position des Zeigers, die erste Zeile eines Absatzes, der erste Buchstabe. Genau dafür gibt es Pseudoklassen und Pseudoelemente – sie sind die Ergänzung zu dem, was der Baum hergibt, und deshalb heißen sie so.

Wer die Begriffe dieser Runde sicher beherrschen will, liest die beiden Grundlagenartikel zur Regelsyntax und zur Wertesyntax. Die zweite erklärt die Schreibweise, in der die Spezifikation erlaubte Werte notiert – wer sie einmal lesen kann, kommt in der gesamten Referenz ohne weitere Erklärung aus.