Zusammenfassung

  • Der erste öffentliche W3C-Arbeitsentwurf zu CSS Variables vom 10. April 2012 behandelte mehrfach notierte Stilwerte. Seine frühe Schreibweise nutzte var-color und var(color); die Kaskade bestimmte den Wert am jeweiligen Element.
  • Die Kandidatenempfehlung vom 3. Dezember 2015 verwendete --main-color und var(--main-color). Der Kandidatentext vom 16. Juni 2022 erläuterte Ersatzwerte sowie fehlende und zirkuläre Bezüge. Eine gemeinsame Farbe konnte durch einen Dokumentzweig wandern, während ein Bauteil seine eigene setzte.

Die Chefredaktion bestellte ein weniger feierliches Burgund. Ein Muster zu wählen war leicht. Schwerer war, sämtliche Kopien der alten Farbe zu finden: auf einem Knopf, mehreren Links, einem Hinweisfeld und einer Überschrift aus der vorletzten Gestaltung. Dreißig Fundstellen zu ändern ist Arbeit; die einunddreißigste zu übersehen ist menschlich. Die Seite sähe danach wie eine Sitzung aus, bei der ein Teil der Belegschaft das Rundschreiben nicht gelesen hat. CSS-Variablen boten einen Boten an: den Wert einmal benennen und ihn dort abrufen, wo er gebraucht wird.

Der erste öffentliche W3C-Arbeitsentwurf CSS Variables vom 10. April 2012 begann mit diesem Wartungsproblem. Große Stylesheets wiederholen Farben und andere Werte; eine Textsuche mit Ersetzung kann falsche Stellen treffen oder verstreute Dateien übersehen. Der Entwurf erlaubte Eigenschaften mit selbst gewählten Namen und deren Verwendung in normalen CSS-Werten. Sein Beispiel setzte eine Farbe an die Dokumentwurzel. Die Nachkommen empfingen sie nach den gewöhnlichen Regeln der Kaskade. Der Browser versandte eine Nachricht an passende Adressen, statt blind Zeichenfolgen in Dateien auszutauschen.

Die Sprache von 2012 trägt ein historisches Namensschild. Der Entwurf schrieb var-color und las var(color). An der Wurzel konnte Blau stehen, auf einem div Grün und auf einer Warnung Rot. Derselbe Name lieferte je nach Aufenthaltsort des Elements einen anderen Wert. Die Zentrale verschickte ihre Mitteilung; eine Abteilung hängte an ihrer Tür eine eigene aus. Genau diese örtliche Zuständigkeit machte den Wert praktischer als ein einziger verschlossener Farbtopf für die ganze Seite.

Namen können sich auch im Kreis schicken. Der Entwurf beschrieb zwei Variablen, die aufeinander zeigen und dadurch ungültig werden. Fragt man die erste nach einer Farbe, verweist sie auf die zweite; die zweite schickt einen zurück. Am Ende des Gangs steht kein geheimer Eimer Farbe. Der Browser berechnet die Werte nach den Regeln, und die von der Kette abhängige Deklaration trägt die Folge. Weniger Kopien im Stylesheet bedeuten nicht, dass man die Beziehungen zwischen Namen ignorieren dürfte.

In der W3C-Kandidatenempfehlung vom 3. Dezember 2015 stand die heute vertraute Schreibweise. --main-color definierte eine benutzerdefinierte Eigenschaft, var(--main-color) las ihren Wert. Das Beispiel legte eine Hauptfarbe an der Wurzel ab und verwendete sie in anderen Regeln und einem daraus gebildeten Akzenthintergrund. Ändert sich der benannte Wert, folgen die abhängigen Stellen. Die Redaktion musste nicht mehr jede Knopfschublade einzeln öffnen.

Die Kaskade bestimmte weiterhin die Empfänger. Definierte ein Bauteil ein eigenes --main-color, erhielten seine Nachkommen diesen lokalen Wert. Die Hauptseite konnte burgunderrot bleiben und das Abo-Feld petrolfarben werden. Taucht auf einem Knopf eine unerwartete Farbe auf, reicht der erste Suchtreffer für den Namen nicht aus. Entscheidend ist die Deklaration, die für genau dieses Element nach Kaskade und Vererbung gewinnt. Gemeinsame Namen heben lokale Anschriften nicht auf.

Der W3C-Kandidatentext vom 16. Juni 2022 erläuterte die Reserve für einen Baustein, der keine Mitteilung erhält. Bei var(--header-color, blue) ist das zweite Argument ein Ersatzwert. Ein wiederverwendbares Bauteil kann eine eigene Standardfarbe mitbringen und trotzdem ein Thema der umgebenden Anwendung annehmen. Die Spezifikation erklärt auch, dass die Reserve Kommas enthalten darf: Alles nach dem ersten trennenden Komma gehört zu ihr. Der Gast hat einen Mantel dabei und kann dennoch den passenden Mantel des Hauses anziehen.

Fehlende und kreisförmige Bezüge zeigen ihre Wirkung beim Berechnen. Eine Deklaration mit var() lässt sich einlesen, bevor klar ist, welcher Wert an ihre Stelle tritt. Ist die angefragte Eigenschaft ungültig oder nicht vorhanden und gibt es keinen brauchbaren Ersatz, verliert die abhängige Deklaration ihr geplantes Ergebnis. Vor einem überraschenden Knopf fragt man daher konkret: Hat er die Wurzelfarbe geerbt, eine lokale Definition erhalten, den Ersatz verwendet oder nach einer ungültigen Referenz eine Deklaration verloren? Die berechnete Darstellung des Elements gibt die Antwort.

Die drei W3C-Dokumente zeigen auch einen Wechsel im Alphabet. Der Arbeitsentwurf von 2012 verwendete var-color und var(color). Der Kandidatentext von 2015 sprach --main-color und var(--main-color). Der Text von 2022 erläuterte Reserven und ungültige Werte genauer. Ein altes Beispiel ist keine unveränderte Anleitung für eine neue Datei. Beständig blieb der Gedanke, einen Wert zu benennen, durch die Kaskade zu leiten und an einer örtlichen Verzweigung eine andere Antwort zu erlauben.

Damit wurde aus der Zeichensuche eine Gestaltungsentscheidung. Wie weit soll das gemeinsame Burgund reichen? Eine Wurzelfarbe kann die Publikation zusammenhalten. Ein Warnfeld braucht vielleicht eine andere Palette. Ein mitgebrachter Baustein hält eine Ersatzfarbe bereit. Der Browser übernimmt Zustellung und Berechnung; die Redaktion beurteilt, ob die Seite noch wie ein gemeinsames Haus aussieht. Die Knöpfe können diesmal kaum behaupten, die Mitteilung sei nie angekommen.