CSS-Parser

Eine Webseite besteht aus zwei getrennten Teilen. Der eine Teil enthält den Inhalt: Überschriften, Texte, Bilder, Links. Der andere Teil enthält die Gestaltung, also Angaben wie „diese Überschrift ist blau und 24 Pixel groß“. Diese Gestaltungsangaben werden in einer eigenen Sprache namens CSS geschrieben, und sie liegen zunächst nur als Text vor. Ein CSS-Parser ist das Programm, das diesen Text Zeichen für Zeichen liest und in eine geordnete Struktur umwandelt. Erst dadurch wird aus einer Zeichenfolge eine Anweisung, die der Browser tatsächlich ausführen kann.

Warum Browser ohne diesen Schritt nichts anzeigen können

Ein Computer versteht Text nicht von selbst. Für ihn ist eine CSS-Datei zunächst nur eine lange Kette einzelner Zeichen. Der Parser gibt dieser Kette eine Bedeutung: Hier beginnt eine Regel, das ist der angesprochene Bereich der Seite, das ist die Eigenschaft, das ist ihr Wert. Ohne diesen Zwischenschritt bliebe jede Webseite grau und unformatiert.

Der Vorgang beeinflusst außerdem, wie schnell sich eine Seite aufbaut. Solange der Browser die Gestaltungsregeln noch nicht verarbeitet hat, kann er nichts zuverlässig zeichnen. Er müsste sonst riskieren, den Text zuerst falsch darzustellen und gleich darauf zu korrigieren. Deshalb gilt CSS in der Fachsprache als blockierend: Der Seitenaufbau wartet auf den Parser. Bei sehr großen Stylesheets, also umfangreichen Gestaltungsdateien, sind das messbare Millisekunden.

Ein zweiter Grund ist Robustheit. CSS ist bewusst so entworfen, dass Fehler nicht die ganze Seite zerstören. Kennt der Parser eine Anweisung nicht, überspringt er genau diese und macht mit der nächsten weiter. Deshalb funktionieren moderne Webseiten auch in älteren Browsern noch halbwegs, statt komplett auszufallen.

Vom Zeichenstrom zur Regel

Die Arbeit läuft in zwei Stufen ab. Zuerst zerlegt der Parser den Text in kleinste sinnvolle Einheiten, sogenannte Tokens. Ein Token ist zum Beispiel ein Wort, eine Zahl, eine geschweifte Klammer oder ein Semikolon. Man kann sich das wie das Trennen eines Satzes in einzelne Wörter und Satzzeichen vorstellen.

In der zweiten Stufe prüft der Parser, wie diese Einheiten zusammengehören. Er erkennt, dass vor der geschweiften Klammer ein Selektor steht, also die Angabe, welche Elemente der Seite gemeint sind. Innerhalb der Klammer erwartet er Paare aus Eigenschaft und Wert, getrennt durch einen Doppelpunkt. Das Ergebnis ist eine Liste sauber sortierter Regeln im Arbeitsspeicher.

Danach beginnt erst die eigentliche Rechenarbeit. Oft treffen mehrere Regeln auf dasselbe Element zu, und der Browser muss entscheiden, welche gewinnt. Diese Auswertung heißt Kaskade und ist nicht mehr Aufgabe des Parsers. Ein häufiger Irrtum ist deshalb, dem Parser die Schuld zu geben, wenn eine Farbe nicht wirkt. Meist hat er die Regel korrekt gelesen, sie wurde nur von einer stärkeren Regel überstimmt.

Wo CSS-Parser überall stecken

Jeder Browser bringt einen eigenen mit. In Chrome und Edge steckt er in der Engine Blink, in Firefox in einem Baustein namens Stylo, in Safari in WebKit. Auch Apps auf dem Handy nutzen solche Bausteine, sobald sie Inhalte aus dem Web anzeigen. Selbst ein E-Mail-Programm, das eine formatierte Werbemail darstellt, verarbeitet dabei CSS.

Außerhalb von Browsern arbeiten Parser in Werkzeugen für Entwickler. Programme wie Sass oder PostCSS lesen Gestaltungsdateien ein, verändern sie automatisch und schreiben eine optimierte Fassung zurück. Sie entfernen etwa überflüssige Leerzeichen oder ergänzen Angaben für ältere Browser. Ohne einen Parser wäre solche automatische Bearbeitung nicht möglich.

In Nachrichten taucht der Begriff meist bei Sicherheitslücken auf. Ein Parser verarbeitet Daten aus dem Internet, also aus einer Quelle, der man nicht trauen kann. Fehler in dieser Verarbeitung wurden schon mehrfach ausgenutzt, um fremden Code auszuführen. Deshalb gehören Parser zu den am gründlichsten getesteten Teilen eines Browsers.