Übung 14: Eine Farbe als Variable an drei Stellen verwenden

Hinweise

Lösung

.karte { --akzent: #7A2FB0; border-color: var(--akzent); }
.karte h3 { color: var(--akzent); }
.karte a { color: var(--akzent); }

Wo eine Variable gilt

Eine Custom Property ist eine gewöhnliche Eigenschaft und wird wie jede andere vererbt. Definiert an einem Element, gilt sie für dieses und alle Nachfahren – deshalb genügt die Definition an der Karte, und Überschrift, Rahmen und Verweis darin können sie einsetzen.

Daraus folgt der übliche Aufbau: Was überall gelten soll, wird am Wurzelelement definiert; was nur für einen Baustein gilt, an dessen Container. Und weil die Kaskade auch für Variablen gilt, lässt sich derselbe Name weiter unten überschreiben – eine zweite Karte mit einer anderen Akzentfarbe braucht dann keine einzige neue Regel für ihre Innereien, sondern nur einen neuen Wert.

Genau darauf beruhen die meisten Umschalter zwischen heller und dunkler Darstellung: Ein Attribut am Wurzelelement tauscht einen ganzen Satz Werte aus, ohne dass eine der eigentlichen Deklarationen wiederholt werden müsste.

Warum das keine Konstante ist

Der Name führt in die Irre: Anders als eine Variable in einem Vorverarbeiter existiert eine Custom Property zur Laufzeit im Browser. Sie folgt der Kaskade, sie wird vererbt, sie lässt sich pro Element unterschiedlich setzen und aus einem Skript heraus ändern. Ein Vorverarbeiter ersetzt seine Variablen beim Übersetzen und weiß vom Dokument nichts.

Der Preis dieser Beweglichkeit ist, dass der Browser den Wert nicht prüft. Alles zwischen dem Doppelpunkt und dem Semikolon wird als Zeichenkette gespeichert; ein Tippfehler fällt beim Definieren nicht auf, sondern erst beim Einsetzen. Und dort mit einer besonderen Folge: Die Eigenschaft fällt nicht auf die vorherige Deklaration zurück, sondern nimmt den geerbten oder den Ausgangswert an. Ein Tippfehler in einer Farbvariablen macht den Text also schwarz und nicht etwa unverändert.

Dagegen hilft der zweite Parameter beim Einsetzen, der einen Ersatzwert angibt. Und wer es genau nimmt, meldet die Variable mit ihrem Typ an – eine eigene At-Regel legt fest, welche Werte erlaubt sind und welchen Ausgangswert sie hat. Ohne diese Anmeldung bleibt sie für den Browser eine Zeichenkette, und Zeichenketten kennen keinen Zwischenwert.

Wie man sie benennt

Der Name ist Groß- und Kleinschreibung gegenüber empfindlich – anders als jede eingebaute Eigenschaft, weil der Browser ihn nicht kennt und Zeichen für Zeichen vergleicht. Zwei Schreibweisen desselben Wortes sind zwei verschiedene Eigenschaften, und der Fehler ist beim Lesen kaum zu sehen.

Bewährt hat sich, nach der Rolle zu benennen und nicht nach dem Aussehen. Ein Name, der die Farbe beschreibt, ist beim nächsten Farbwechsel eine Lüge; ein Name, der den Zweck beschreibt, überlebt ihn. In größeren Systemen werden zwei Ebenen geführt: eine Palette mit den rohen Werten und darüber eine Ebene mit Rollen, die auf die Palette zeigt. Dann lässt sich ein Farbschema tauschen, ohne eine einzige Verwendung anzufassen.

Für diese Aufgabe genügt ein Name. Wichtig ist nur, dass der Farbwert wirklich nur einmal im Stylesheet steht – das prüft der Prüfer nicht am Quelltext, sondern daran, dass alle drei Stellen dieselbe berechnete Farbe tragen.

Variablen und Skripte

Weil eine Custom Property zur Laufzeit existiert, lässt sie sich aus einem Skript heraus setzen – an einem Element, und damit für dieses und alle Nachfahren. Das ist die sparsamste Art, ein Skript mit dem Stylesheet zu verbinden: Das Skript setzt eine Zahl oder eine Farbe, das Stylesheet entscheidet, was daraus wird. Wo früher eine Klasse pro Zustand nötig war, genügt heute ein Wert.

Ausgelesen wird sie über die berechneten Stile, und dort ist zu beachten, dass der Wert als Zeichenkette zurückkommt – einschließlich führender Leerzeichen, weil der Browser den Inhalt nicht deutet. Wer damit rechnen will, muss selbst umwandeln.

Ein zweiter Punkt betrifft Übergänge: Eine Variable ist von Haus aus eine Zeichenkette und wird sprunghaft ersetzt, nicht weich überblendet. Weich wechselt die Eigenschaft, in der sie landet – ein Farbwechsel über eine Variable sieht also nur dann sanft aus, wenn die Farbe selbst einen Übergang hat. Wer die Variable selbst animieren will, muss sie mit ihrem Typ anmelden; erst dann weiß der Browser, dass es sich um eine Farbe handelt und wie zwischen zwei Werten zu rechnen ist.

Geprüft wird, dass alle drei Stellen dieselbe berechnete Farbe tragen. Ob die Variable an der Karte oder am Wurzelelement definiert ist, spielt für die Messung keine Rolle; für den Aufbau eines Stylesheets schon – am Wurzelelement gilt sie überall, an der Karte nur dort, und eine zweite Karte kann sie dann mit einem einzigen neuen Wert überschreiben.

Fragen zur Übung