Zusammenfassung

  • Der erste öffentliche W3C-Entwurf vom Juni 2016 schlug die Registrierung benutzerdefinierter Eigenschaften per JavaScript vor: mit Werttyp, Anfangswert und Vererbung. Sein Beispiel ließ die Farbe eines Verlaufs übergehen.
  • Der Entwurf von 2019 brachte zusätzlich @property in CSS. Der Text von 2024 erläuterte die Typprüfung beim berechneten Wert und die gemeinsame Bedeutung eines registrierten Namens im gesamten Dokument.

Die Gestalterin legt eine rote und eine grüne Farbkarte auf den Tisch. Ein Verlauf soll in einer Sekunde von der einen zur anderen gelangen. Sie nennt die Variable --stop-color, setzt die beiden Farben ein und bestellt eine Transition. Der Browser erhält damit CSS-Token, aus denen vieles werden könnte. Dass im Namen „color“ steht, ist eine Hilfe für Menschen und noch kein Typ für die Berechnung. Die Bewerberin erscheint mit zwei schönen Arbeitsproben zum Gespräch, lässt aber das Feld „Beruf“ leer. Der Verlauf springt von Rot nach Grün, als hätte er die Reise dazwischen verpasst.

Der erste öffentliche Entwurf der CSS Properties and Values API vom 7. Juni 2016 ergänzte dieses Feld. Er erweiterte CSS Variables um Registrierung mit Typ, Anfangswert und Vererbungsverhalten. Der Weg führte damals über CSS.registerProperty() in JavaScript. Sein Beispiel registrierte --stop-color als <color>, gab ihm einen transparenten Ausgangswert und inherits: false, dann änderte es den Wert beim Darüberfahren. Mit dem Typ kann der Browser Farben zwischen Rot und Grün berechnen. Der sprechende Name allein hatte ihm dafür keine Rechenregel geliefert.

Der Entwurf vom 9. November 2017 entwickelte die Registrierung und typisierte Animation weiter. In den erhaltenen Texten dieser Phase lag die Registrierung weiter in JavaScript. Die heute geläufige CSS-Regel @property war dort noch nicht angekommen. Erst ging es darum, was der Browser über einen Wert erfahren muss. Danach wurde wichtig, ob sich dieser Vertrag auch dort aufschreiben lässt, wo die Gestaltung selbst steht.

Im Entwurf vom 25. Oktober 2019 standen zwei Eingänge offen: CSS.registerProperty() im Skript und @property im Stylesheet. Die CSS-Regel kann syntax, inherits und initial-value festhalten. Wer --radius neben einer gezeichneten Kreisfläche entdeckt, sieht dort, dass der Wert eine Länge ist, bei null beginnt und nicht automatisch an Kinder weitergegeben wird. Die Beschreibung liegt am Arbeitsplatz der Eigenschaft und nicht zwingend in einem anderen Raum namens JavaScript.

Der Entwurf vom 13. Oktober 2020 behielt beide Registrierungswege und die Animationsbeispiele bei. Der Gewinn lässt sich ansehen: Eine Farbe läuft durch andere Farben; eine Länge durch weitere Größen. Ein als <length> registriertes --radius kann einen gemalten Kreis von zehn auf fünfzig Pixel wachsen lassen, mit allen Zwischenradien. Für jedes Bild hat der Browser nun eine sinnvolle Aufgabe, statt nur die Schilder „klein“ und „groß“ auszutauschen.

Der Entwurf vom 26. März 2024 beschreibt die Bedingungen des Arbeitsvertrags. Eine gültige @property-Regel braucht syntax und inherits. Nennt die Syntax einen bestimmten Typ statt des allgemeinen *, benötigt sie außerdem einen gültigen, unabhängig berechenbaren initial-value. Die Angaben beantworten drei Fragen: Was darf herein, wo beginnt der Wert, und bekommen Nachkommen ihn automatisch? Fehlt eine Pflichtangabe, wird die Registrierung verworfen. Der Browser kann einen Längenwert nicht mit einer halben Typbeschreibung interpolieren.

Die Typprüfung erfolgt erst beim berechneten Wert. Ein Skript kann eine Eigenschaft registrieren, nachdem die CSS-Deklarationen gelesen wurden. Würde der Browser vermeintlich unpassende Angaben bereits beim Parsen wegwerfen, müsste er alle weggeworfenen Fassungen aufheben oder das Stylesheet bei späterer Registrierung erneut lesen. Der Text von 2024 legt diese Kosten offen. Das Vorstellungsgespräch findet deshalb an einer bestimmten Station der CSS-Verarbeitung statt, vor der Ersetzung durch var().

Auch der Name arbeitet nicht bloß im eigenen Komponentenbüro. Registrierungen gelten für das ganze Dokument, einschließlich Regeln in Shadow DOM. Unter mehreren gültigen CSS-Regeln für denselben Namen gewinnt die letzte in Stylesheet-Reihenfolge; eine JavaScript-Registrierung steht darüber. Zwei Komponenten können --radius als ihr privates Werkzeug betrachten, doch der Browser muss dem Namen eine gemeinsame Bedeutung geben. Die Arbeitsgruppe erklärt den Streitpunkt: Komponenten wünschen eigene Räume, während die umgebende Seite ihnen typisierte Werte schicken können soll.

Die W3C-Veröffentlichungsgeschichte ordnet die Entwürfe von 2016 bis 2024. Die Variable hat ihren Typ, ihren Anfang und ihre Vererbungsregel angegeben. Jetzt darf sie endlich eine Farbveränderung übernehmen, die den Weg zwischen Rot und Grün tatsächlich zeigt.