Übergänge und Datenschutz in CSS
Propiedades personalizadas de CSS, también conocidas como CSS-VariablenMit dieser Option können Sie Ihre eigenen Eigenschaften in CSS definieren und deren Werte in Ihrem gesamten CSS verwenden. Obwohl sie heute unglaublich nützlich sind, haben sie Mängel, die es schwierig machen können, mit ihnen zu arbeiten: Sie können jeden Wert annehmen, so dass sie versehentlich mit etwas Unerwartetem überschrieben werden können, sie erben ihre Werte immer von ihren Eltern und Ihnen kann nicht übergehen. Mit Houdinis CSS-Eigenschaften- und Werte-API-Ebene 1Diese Mängel, die jetzt in Chrome 78 verfügbar sind, werden behoben und machen benutzerdefinierte CSS-Eigenschaften unglaublich leistungsfähig!
Was ist Houdini?
Antes de hablar sobre la nueva API, hablemos de Houdini rápidamente. El grupo de trabajo CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para «desarrollar funciones que expliquen la ‘magia’ del estilo y el diseño en la web». La colección de Houdini-Spezifikationen están diseñados para abrir el poder del motor de renderizado del Browser, lo que permite una visión más profunda de nuestros estilos y la capacidad de ampliar nuestro motor de renderizado. Con esto, finalmente es posible escribir valores CSS en JavaScript y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la Netz.
CSS-Eigenschaften- und Werte-API-Ebene 1
das CSS-Eigenschaften- und Werte-API-Ebene 1 (Houdini Props and Vals) ermöglicht es uns, unseren benutzerdefinierten Eigenschaften Struktur zu verleihen. Dies ist die aktuelle Situation bei Verwendung benutzerdefinierter Eigenschaften:
.thing {
--Meine farbe: green;
}Da benutzerdefinierte Eigenschaften keine Typen haben, können sie auf unerwartete Weise überschrieben werden. Überlegen Sie beispielsweise, was passiert, wenn Sie definieren --Meine farbe mit einer Url.
.thing {
--Meine farbe: URL('not-a-color');
Farbe: var(--Meine farbe);
}Hier weil --Meine farbe Es ist nicht geschrieben, es weiß nicht, dass eine URL kein gültiger Farbwert ist. Wenn wir es verwenden, werden die Standardeinstellungen wiederhergestellt (schwarz für Farbetransparent für Hintergrund). Mit Houdini Requisiten und Vals können benutzerdefinierte Eigenschaften sein Eingetragen Der Browser weiß also was sollte sein!
Nun die benutzerdefinierte Eigenschaft --Meine farbe ist als Farbe registriert! Dies teilt dem Browser mit, welche Arten von Werten zulässig sind und wie er diese Eigenschaft schreiben und verarbeiten kann!
Anatomie eines eingetragenen Eigentums
Die Registrierung einer Immobilie sieht folgendermaßen aus:
Fenster.CSS.registerProperty({
Süßkartoffel: '--my-color',
Syntax: '<color>',
inherits: falsch,
initialValue: 'black',
});Unterstützt die folgenden Optionen:
Name: Zeichenfolge
Der Name der benutzerdefinierten Eigenschaft.
Syntax: Zeichenfolge
So analysieren Sie die benutzerdefinierte Eigenschaft. Eine vollständige Liste der möglichen Werte finden Sie in der CSS-Werte und Einheiten Spezifikation. Standardmäßig *.
erbt: boolean
Wenn er den Wert von seinem Vater erbt. Standardmäßig wahr.
initialValue: Zeichenfolge
Anfangswert der benutzerdefinierten Eigenschaft.
Bei näherer Betrachtung Syntax. Es gibt eine Reihe von gültige Optionen
von Zahlen über Farben bis hin zu
Typen. Diese Syntax kann auch mit den folgenden Werten geändert werden
- Anhängen
+bedeutet, dass eine durch Leerzeichen getrennte Liste von Werten aus dieser Syntax akzeptiert wird. Zum Beispiel,+wäre eine Liste von Längen, die durch Leerzeichen getrennt sind - Anhängen
#bedeutet, dass eine durch Kommas getrennte Liste von Werten aus dieser Syntax akzeptiert wird. Zum Beispiel,#Es wäre eine Liste von Farben, die durch Kommas getrennt sind - Hinzufügen
|zwischen Syntax oder Bezeichnern bedeutet, dass alle angegebenen Optionen gültig sind. Zum Beispiel,# | | Magiewürde eine Liste von Farben erlauben, die durch Kommas, eine URL oder das Wort getrennt sindMagie.
Fallstricke
Es gibt zwei Fallen mit Houdini Props und Waltz. Das erste ist, dass es nach der Definition keine Möglichkeit gibt, eine vorhandene registrierte Eigenschaft zu aktualisieren. Wenn Sie versuchen, eine Eigenschaft erneut zu registrieren, wird ein Fehler zurückgegeben, der darauf hinweist, dass sie bereits definiert wurde.
Zweitens werden registrierte Eigenschaften im Gegensatz zu Standardeigenschaften beim Analysieren nicht validiert. Sie werden vielmehr validiert, wenn sie berechnet werden. Dies bedeutet, dass ungültige Werte bei der Überprüfung der Eigenschaften des Elements nicht als ungültig angezeigt werden und das Einfügen einer ungültigen Eigenschaft nach einer gültigen Eigenschaft nicht zu einer gültigen zurückgesetzt wird. Eine ungültige Eigenschaft wird jedoch auf den Standardwert der registrierten Eigenschaft zurückgesetzt.
Benutzerdefinierte Eigenschaften animieren
Eine registrierte benutzerdefinierte Eigenschaft bietet einen unterhaltsamen Bonus, der über die Typprüfung hinausgeht - die Möglichkeit, sie zu animieren! Ein einfaches Animationsbeispiel sieht folgendermaßen aus:
<Skript>
CSS.registerProperty({
Süßkartoffel: '--stop-color',
Syntax: '<color>',
inherits: falsch,
initialValue: 'blue',
});
</Skript><Stil>
Taste {
--stop-color: Netz;
transition: --stop-color: 1s;
}
button:hover {
--stop-color: green;
}
</Stil>
Wenn Sie mit der Maus über die Schaltfläche fahren, wird sie von rot nach grün animiert! Ohne Registrierung der Eigenschaft springt sie von einer Farbe in eine andere, da der Browser ohne Registrierung nicht weiß, was zwischen einem Wert und dem nächsten zu erwarten ist, und daher die Übergangsfähigkeit nicht garantieren kann. Dieses Beispiel kann jedoch noch einen Schritt weiter gehen, um CSS-Gradienten zu animieren. Das folgende CSS kann mit derselben registrierten Eigenschaft geschrieben werden:
Taste {
--stop-color: Netz;
Hintergrund: linearer Gradient(var(--stop-color), black);
transition: --stop-color 1s;
}button:hover {
--stop-color: green;
}
Dadurch wird unsere benutzerdefinierte Eigenschaft animiert, die Teil der ist linearer Gradientund animieren so unseren linearen Gradienten. Schauen Sie sich den Glitch unten an, um den vollständigen Code in Aktion zu sehen und selbst damit herumzuspielen.
Fazit
Houdini ist unterwegs a los Browser y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el Paint API Unsere kreative Toolbox ist bereits ausgeliefert und jetzt mit benutzerdefinierten Requisiten und Vals ausgestattet. Sie ermöglicht es uns, geschriebene CSS-Eigenschaften zu definieren und sie zum Erstellen und Animieren neuer und aufregender Designs zu verwenden. Weitere sind auch unterwegs, in der Houdinis Problemwarteschlange Hier können Sie Ihre Meinung abgeben und sehen, was als nächstes für Houdini kommt. Houdini existiert, um Funktionen zu entwickeln, die die "Magie" von Stil und Design im Web erklären. Gehen Sie also raus und nutzen Sie diese magischen Funktionen.
Foto von
Maik Jonietz
im
Unsplash
