CSS-Variablen Superkräfte verleihen

CSS Houdini es un término general que cubre un conjunto de API de bajo nivel que exponen partes del motor de renderizado CSS y dan a los desarrolladores acceso al modelo de objetos CSS. Este es un gran cambio para el ecosistema CSS, ya que permite a los desarrolladores decirle al Browser cómo leer y analizar CSS personalizado sin esperar a que los proveedores de Browser implementen de forma nativa estas características. ¡Qué emocionante!

Eine der aufregendsten Ergänzungen zu CSS innerhalb des Houdini-Schirms ist die
Eigenschaften und Werte API. Diese API lädt Ihre benutzerdefinierten CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) auf, indem sie ihnen eine semantische Bedeutung (definiert durch eine Syntax) und sogar alternative Werte geben, sodass CSS-Tests möglich sind.

Schreiben Sie benutzerdefinierte Houdini-Eigenschaften

Hier ist ein Beispiel für das Festlegen einer benutzerdefinierten Eigenschaft (denken Sie an: CSS-Variable), aber jetzt mit einer Syntax (Typ), einem Anfangswert (Hintergrund) und einem Vererbungsbooleschen Wert (erbt sie den Wert von ihrem übergeordneten Element oder nicht?). Der derzeitige Weg, dies zu tun, ist durch CSS.registerProperty () im JavaScript, pero en Chromium 85 y posteriores, el
@Eigentum Die Syntax ist mit Ihren CSS-Dateien kompatibel:

CSS.registerProperty({
Süßkartoffel: '--colorPrimary',
Syntax: '<color>',
initialValue: 'magenta',
inherits: falsch
});

@Eigentum --colorPrimary {
Syntax: '<color>';
Ursprünglicher Wert: Magenta;
inherits: falsch;
}

Jetzt können Sie zugreifen --colorPrimary wie jede andere benutzerdefinierte CSS-Eigenschaft über
var (- colorPrimary). Der Unterschied besteht jedoch darin, dass --colorPrimary Es wird nicht nur als Zeichenfolge gelesen. Sie haben Daten!

Alternative Werte

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

Betrachten Sie das folgende Beispiel. das --colorPrimary Variable hat eine
Ursprünglicher Wert von Magenta. Der Entwickler hat ihm jedoch den ungültigen Wert "23" gegeben. Ohne @Eigentumwürde der CSS-Parser den ungültigen Code ignorieren. Jetzt kehrt der Analysator zu zurück Magenta. Dies ermöglicht echte Schutzmaßnahmen und Tests innerhalb von CSS. Organisiert!

.card {
Hintergrundfarbe: var(--colorPrimary); 
}
.highlight-card {
--colorPrimary: yellow;
Hintergrundfarbe: var(--colorPrimary); 
}
.another-card {
--colorPrimary: 23;
Hintergrundfarbe: var(--colorPrimary); 
}

Syntax

Mit der Syntaxfunktion können Sie jetzt semantisches CSS schreiben, indem Sie einen Typ angeben. Zu den derzeit zulässigen Typen gehören:

• Länge
• Nummer
• Prozentsatz
• Längenprozentsatz
• Farbe
• Bild
• URL
• ganze Zahl
• Winkel
• Zeit
• Auflösung
• Transformationsliste
• Transformationsfunktion
• benutzerdefinierte-ident (eine benutzerdefinierte Identifikationszeichenfolge)

Durch Festlegen einer Syntax kann der Browser nach benutzerdefinierten Eigenschaften suchen. Dies hat viele Vorteile.

Para ilustrar este punto, le mostraré cómo animar un degradiert. Actualmente, no hay forma de animar (o interpolar) sin problemas entre los valores de gradiente, ya que cada declaración de gradiente se analiza como una cadena.

In diesem Beispiel wird der Gradientenstoppprozentsatz mithilfe einer Schichtinteraktion von einem Startwert von 40% auf einen Endwert von 100% animiert. Sie sollten einen glatten Übergang von dieser oberen Farbverlaufsfarbe nach unten sehen.

Der Browser auf der linken Seite unterstützt die Houdini-API für Eigenschaften und Werte und ermöglicht so einen reibungslosen Übergang des Gradientenstopps. Der Browser auf der rechten Seite tut dies nicht. Der nicht unterstützte Browser kann diese Änderung nur als Zeichenfolge von Punkt A nach Punkt B verstehen. Es gibt keine Möglichkeit, die Werte zu interpolieren, und daher ist kein derart reibungsloser Übergang zu sehen.

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

@supports (Hintergrund: Farbe(something)) {
@Eigentum --gradPoint {
Syntax: '<percentage>';
inherits: falsch;
Ursprünglicher Wert: 40%;
}
}

Und wenn es Zeit ist, es zu animieren, können Sie den Wert der Initiale aktualisieren 40% zu 100%:

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

Dies ermöglicht nun diesen glatten Gradientenübergang.

Fazit

das @Eigentum rule hace que una tecnología emocionante Sein aún más accesible al permitirle escribir CSS semánticamente significativo dentro del propio CSS. Para obtener más información sobre CSS Houdini y la API de propiedades y valores, consulte estos recursos:

Foto von Christliche Escobar auf Unsplash.