@property: CSS-Variablen besondere Möglichkeiten

Una Kravets

CSS Houdini ist ein Überbegriff für eine Reihe von Low-Level-APIs, die Teile der CSS-Rendering-Engine verfügbar machen und Entwicklern Zugriff auf das CSS-Objektmodell gewähren. Dies stellt eine enorme Änderung für das CSS-Ökosystem dar, da Entwickler damit dem Browser mitteilen können, wie benutzerdefiniertes CSS gelesen und geparst werden soll, ohne auf die Unterstützung der jeweiligen Browseranbieter warten zu müssen. So aufregend!

Eine der interessantesten Ergänzungen zu CSS innerhalb von Houdini ist die Properties and Values API.

Diese API optimiert Ihre benutzerdefinierten CSS-Eigenschaften (auch häufig als CSS-Variablen bezeichnet), indem sie ihnen eine semantische Bedeutung (definiert durch eine Syntax) und sogar Fallback-Werte verleiht, sodass CSS-Tests möglich sind.

Benutzerdefinierte Houdini-Eigenschaften schreiben

In diesem Beispiel wird eine benutzerdefinierte Eigenschaft (z. B. eine CSS-Variable) festgelegt, aber jetzt mit einer Syntax (Typ), einem Anfangswert (Fallback) und einer booleschen Übernahme (übernimmt sie den Wert des übergeordneten Elements oder nicht?). Aktuell erfolgt dies über CSS.registerProperty() in JavaScript. In unterstützten Browsern können Sie aber @property verwenden:

Separate JavaScript-Datei (Chromium 78)

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});

In der CSS-Datei (Chromium 85) enthalten

@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

Jetzt können Sie wie auf jede andere benutzerdefinierte CSS-Property über var(--colorPrimary) auf --colorPrimary zugreifen. Der Unterschied hier besteht jedoch darin, dass --colorPrimary nicht einfach als String gelesen wird. Es gibt Daten!

Wenn Sie eine registrierte benutzerdefinierte Eigenschaft mit einer angegebenen syntax schreiben, müssen Sie auch eine initial-value einfügen.

Fallback-Werte

Wie bei allen anderen benutzerdefinierten Eigenschaften können Sie Werte abrufen (mit var) oder festlegen (schreiben/umschreiben). Wenn Sie jedoch beim Überschreiben einen falschen Wert festlegen, sendet das CSS-Rendering-Modul den Anfangswert (den Fallback-Wert) anstatt die Zeile zu ignorieren.

Betrachten Sie das Beispiel unten. Die Variable --colorPrimary hat einen initial-value von magenta. Der Entwickler hat ihr jedoch den ungültigen Wert "23" zugewiesen. Ohne @property würde der CSS-Parser den ungültigen Code ignorieren. Jetzt greift der Parser auf magenta zurück. Dies ermöglicht echte Fallbacks und Tests in CSS. Prima!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Syntax

Mit der Syntaxfunktion können Sie jetzt semantischen CSS-Code schreiben, indem Sie einen Typ angeben. Derzeit sind folgende Typen zulässig:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (ein String mit benutzerdefinierter Kennung)

Wenn Sie eine Syntax festlegen, kann der Browser die Typprüfung für benutzerdefinierte Eigenschaften durchführen. Das hat viele Vorteile.

Zur Veranschaulichung zeige ich Ihnen, wie Sie einen Farbverlauf animieren. Derzeit gibt es keine Möglichkeit, Gradientenwerte reibungslos zu animieren (oder zu interpolieren), da jede Gradientendeklaration als String geparst wird.

Bei Verwendung einer benutzerdefinierten Eigenschaft mit einer „Zahl“-Syntax zeigt der Farbverlauf auf der linken Seite einen weichen Übergang zwischen Haltestellenwerten an. Der Farbverlauf auf der rechten Seite verwendet eine benutzerdefinierte Standardeigenschaft (keine Syntax definiert) und zeigt einen abrupten Übergang.

In diesem Beispiel wird der Prozentsatz der Gradientenstopp durch Bewegen des Mauszeigers von einem Startwert von 40% bis zu einem Endwert von 100% animiert. Der Übergang der Farbe des oberen Farbverlaufs sollte nach unten fließend wirken.

Der linke Browser unterstützt die Houdini Properties and Values API und ermöglicht so einen reibungslosen Übergang von Farbverlaufsstopps. Beim Browser auf der rechten Seite ist dies nicht der Fall. Der Browser, der den Browser nicht unterstützt, kann diese Änderung nur als String verstehen, der von Punkt A nach Punkt B führt. Da es keine Möglichkeit gibt, die Werte zu interpolieren, ist ein reibungsloser Übergang nicht möglich.

Wenn Sie jedoch beim Schreiben benutzerdefinierter Eigenschaften den Syntaxtyp deklarieren und dann diese benutzerdefinierten Eigenschaften verwenden, um die Animation zu aktivieren, sehen Sie den Übergang. Sie können die benutzerdefinierte Eigenschaft --gradPoint so instanziieren:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Wenn es Zeit für die Animation ist, können Sie den Wert von der anfänglichen 40% in 100% aktualisieren:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

Damit wird dieser weiche Farbverlaufsübergang aktiviert.

Weiche Übergangsränder mit Farbverlauf. Demo zu Glitch ansehen

Fazit

Die @property-Regel macht eine spannende Technologie noch zugänglicher, da Sie damit in CSS selbst semantisch aussagekräftiges CSS schreiben können. Weitere Informationen zu CSS Houdini und der Properties and Values API finden Sie in den folgenden Ressourcen:

• Ist Houdini schon bereit?
• Referenz des MDN Houdini
• Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini
• Houdini CSSWG-Problemwarteschlange

Foto von Cristian Escobar bei Unsplash.