Rotierender Glow-Rand mit @property umsetzen

Eine CSS-Variable wie --angle: 0deg sieht aus wie eine Zahl mit Einheit, ist für den Browser aber zunächst nichts weiter als eine Folge von Tokens. Das macht sich bemerkbar, sobald man versucht, sie über @keyframes zu animieren: Der Browser kann zwischen 0deg und 360deg keine Zwischenwerte berechnen und wechselt stattdessen abrupt bei der Hälfte der Animationsdauer. @property behebt das, indem es der Variable einen festen Typ gibt, zum Beispiel <angle>. Ein guter Anlass, das am Beispiel eines rotierenden Glow-Rands durchzuspielen.

Deklariert man eine Custom Property ohne @property, hat sie automatisch den Typ *, den CSS-Werkzeugkasten für „irgendein gültiges Token". Der Browser interpretiert den Wert erst dort, wo er tatsächlich gebraucht wird, etwa als Winkel innerhalb von conic-gradient(). Für eine Animation reicht das nicht: @keyframes muss zwischen Start- und Endwert interpolieren, also Zwischenwerte berechnen, und das setzt einen bekannten Werttyp voraus. Bei einer typlosen Zeichenkette fehlt dafür der Ansatzpunkt.

Der Farbverlauf steht zwar da, dreht sich aber nicht. Ohne Registrierung kann der Browser --angle nicht kontinuierlich interpolieren, der Wert wechselt lediglich abrupt zwischen 0deg und 360deg , zwei Winkeln, die bei einem vollen Kreis ohnehin dieselbe Darstellung ergeben. Der Sprung bleibt deshalb unsichtbar.

@property meldet eine Custom Property beim Browser an und legt drei Angaben fest: syntax bestimmt den erlaubten Werttyp, inherits legt fest, ob Kindelemente den Wert erben, initial-value definiert den Initialwert der registrierten Property. Unregistrierte Custom Properties werden standardmäßig vererbt, inherits gibt bei registrierten Properties die Möglichkeit, das für technische Zustandswerte wie --angle bewusst abzuschalten.

syntax und inherits sind Pflichtangaben. initial-value wird zur Pflicht, sobald syntax etwas anderes ist als das universelle *. Fehlt in diesem Fall eine der drei Angaben, verwirft der Browser die gesamte Regel, und die Property bleibt untypisiert.

Mit registriertem --angle lässt sich der Farbverlauf jetzt tatsächlich drehen, kombiniert mit einer Maskierungstechnik, die aus der Fläche einen schmalen Rand macht:

Das ::before-Element liegt zwei Pixel größer als die Karte selbst und bekommt denselben Farbverlauf als Hintergrund. Die Maske aus zwei überlagerten Verläufen, einmal auf den Innenbereich begrenzt (content-box), einmal auf die volle Fläche, schneidet zusammen mit mask-composite: exclude genau den mittleren Ring aus, der sichtbar bleibt. Übrig bleibt ein zwei Pixel breiter Verlauf, der sich dank registriertem --angle erkennbar um die Karte dreht. pointer-events: none verhindert, dass das rein dekorative Element Klicks oder Hover-Zustände auf darunterliegenden Links und Buttons abfängt. Die @media-Regel am Ende berücksichtigt prefers-reduced-motion: Wer reduzierte Bewegung im Betriebssystem eingestellt hat, sieht den Glow weiterhin, allerdings ohne die dauerhafte Rotation.

Registrierte Custom Properties lassen sich auch mit transition interpolieren, nicht nur mit @keyframes. Der Browser kennt nach der Registrierung den Datentyp und kann deshalb bei einem Hover-Übergang sauber zwischen zwei Werten überblenden, egal ob es sich um einen Winkel, eine Farbe oder eine Länge handelt.

Beim Hover wechselt --glow-color weich von Indigo zu Türkis, statt abrupt umzuspringen, genau die Interpolation, die ohne Registrierung fehlen würde. Auf dieselbe Art lassen sich auch Prozentwerte registrieren, etwa für einen animierten Fortschrittsring mit <percentage>.

Registrierte Custom Properties bringen neben der Animierbarkeit noch einen zweiten Vorteil mit: Type-Checking. Ein ungültiger Wert für --angle, etwa eine Farbe oder ein Text ohne Winkeleinheit, wird nicht einfach durchgereicht, sondern fällt auf den registrierten initial-value zurück. Unregistrierte Custom Properties akzeptieren dagegen jeden beliebigen Wert, auch offensichtlich falsche, ohne jede Prüfung.