@property: CSS-Variablen besondere Möglichkeiten

Una Kravets

Preisvergleichsportal Houdini ist ein Oberbegriff für eine Reihe von Low-Level-APIs, die Teile des CSS-Rendering-Moduls sichtbar machen und Entwicklerzugriff auf das CSS-Objektmodell. Das ist ein für das Preisvergleichsportal-Ökosystem verändern, da Entwickler damit dem Browser mitteilen können, um benutzerdefinierten CSS-Code zu lesen und zu parsen, ohne auf die Bereitstellung der Browseranbieter zu warten integrierte Unterstützung für diese Funktionen. So aufregend!

Eine der interessantesten Neuerungen im Preisvergleichsportal unter Houdini ist die Eigenschaften und Werte API hinzu.

Diese API optimiert Ihre benutzerdefinierten CSS-Eigenschaften (auch bekannt als CSS-Variablen), indem ihnen semantische Bedeutung (durch die Syntax definiert) und sogar Fallback-Werte verwenden, um CSS-Tests zu ermöglichen.

Benutzerdefinierte Houdini-Eigenschaften schreiben

Hier sehen Sie ein Beispiel für das Festlegen einer benutzerdefinierten Eigenschaft (z. B. CSS-Variable). mit einer Syntax (Typ), einem Anfangswert (Fallback) und einem booleschen Vererbungswert ( wird der Wert vom übergeordneten Element übernommen oder nicht?). Aktuell geht das so: über CSS.registerProperty() in JavaScript. In unterstützten Browsern kannst du @property:

Separate JavaScript-Datei (Chromium 78)

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

In CSS-Datei (Chromium 85) enthalten

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

Sie können jetzt wie auf jede andere benutzerdefinierte CSS-Eigenschaft auf --colorPrimary zugreifen: var(--colorPrimary). Der Unterschied hier ist jedoch, dass --colorPrimary nicht einfach als Zeichenfolge gelesen. Es enthält 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 jeder anderen benutzerdefinierten Eigenschaft können Sie (mit var) abrufen oder festlegen (Schreiben/Umschreiben) von Werten, aber mit benutzerdefinierten Houdini-Eigenschaften, wenn Sie einen „falsey“ festlegen Wert beim Überschreiben sendet, sendet die CSS-Rendering-Engine den Anfangswert (seinen Fallback-Wert) ein, anstatt die Zeile zu ignorieren.

Betrachten Sie das folgende Beispiel. Die Variable --colorPrimary enthält einen initial-value von magenta. Der Entwickler hat ihr jedoch die ungültige „23“. Ohne @property würde der CSS-Parser die Ungültiger Code. Jetzt greift der Parser auf magenta zurück. So können Sie echte Fallbacks und Tests innerhalb von CSS. Sehr gut!

.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 semantische CSS schreiben, indem Sie einen Typ. 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 benutzerdefinierter ID-String)

Wenn Sie eine Syntax festlegen, kann der Browser die Typen von benutzerdefinierten Eigenschaften überprüfen. Dies hat viele Vorteile.

Um diesen Punkt zu veranschaulichen, zeige ich Ihnen, wie Sie einen Farbverlauf animieren können. Derzeit gibt es keine Möglichkeit, zwischen Farbverlaufswerten eine reibungslose Animation (oder Interpolation) wird jede Gradientendeklaration als Zeichenfolge geparst.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> Benutzerdefinierte Eigenschaft mit einer „Zahl“ verwenden Syntax verwendet, zeigt der Farbverlauf auf der linken Seite eine gleichmäßige Übergang zwischen Haltestellenwerten. Für den Farbverlauf auf der rechten Seite wird eine benutzerdefinierte Standardeigenschaft verwendet. (keine Syntax definiert) und zeigt einen abrupten Übergang.

In diesem Beispiel wird der Prozentsatz der Farbverlaufsstopps von einem Anfang an von 40% bis zum Endwert 100 %. Es sollte eine der Farbverlaufsfarbe des oberen Farbverlaufs nach unten.

Der linke Browser unterstützt die Houdini Properties and Values API. Dies ermöglicht einen weichen Farbverlaufsstoppübergang. Im Browser auf der rechten Seite ist dies nicht der Fall. Die nicht unterstützenden Browser kann diese Änderung nur als String verstehen, der von A nach B. Es gibt keine Möglichkeit, die Werte zu interpolieren. sodass der Übergang nicht reibungslos verläuft.

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

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Wenn die Animation dann ansteht, können Sie den Wert von 40% in 100% ändern:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Dadurch wird dieser sanfte Farbverlauf ermöglicht.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> Reibungslose Übergänge bei Farbverlaufsrändern Demo zu Glitch ansehen

Fazit

Die @property-Regel macht eine spannende Technologie für Nutzer noch leichter zugänglich mit denen Sie semantisch aussagekräftigen CSS-Code in CSS schreiben können. Weitere Informationen Weitere Informationen zu CSS Houdini und der Properties and Values API finden Sie in diesen Ressourcen:

• Ist Houdini schon bereit?
• Referenz von MDN Houdini
• Intelligentere benutzerdefinierte Properties mit der neuen API von Houdini
• Houdini CSSWG – Problemwarteschlange

Foto von Cristian Escobar auf Unsplash.