Una Kravetz untersucht, wie Chrome jetzt CSS-Custom-Properties direkt aus CSS mit mehr Informationen als nur einem String deklarieren lässt.
Anstatt also so etwas wie das hier
html {
--stop: 50%;
}…kann mit mehr Details wie diesem deklariert werden
@property --stop {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}Der Browser weiß dann, dass diese spezielle benutzerdefinierte Eigenschaft ein Prozentsatz und kein String ist. Es können auch andere nützliche Dinge wie <integer> und <color> sein. Jetzt, da wir dem Browser diese Art von Informationen mitteilen können, erhalten wir einige neue Möglichkeiten, wie zum Beispiel den Übergang zwischen zwei Werten.
Beim Herumspielen habe ich bemerkt, dass die zu animierende Eigenschaft sehr spezifisch genannt werden muss (da ein Catch-all transition nicht ausreicht). Versuche, über diese Demo zu fahren, die eine Nachbildung dessen ist, was Una im Beitrag gemacht hat.
Beachte, dass ich die Position des Farbstopps (die ein Prozentsatz ist) animiere, aber ich versuche auch, die Farbe zu animieren, was immer noch nicht funktioniert. Ich nahm an, dass es mit dieser neuen Funktion funktionieren würde. Ich weiß, dass die Leute schon lange verwirrt über das Fehlen der Möglichkeit sind, Farbverläufe zu animieren. (Siehe Ana Tudors Artikel.)
Sie können die Eigenschaften jederzeit auf einer hohen Ebene neu deklarieren, um Browser zu "unterstützen", die keine benutzerdefinierten Eigenschaften lesen können. Es fühlt sich wie eine lustige Zeit an, darüber zu sprechen. Safari scheint ein starkes Interesse an diesen Houdini-basierten Dingen zu signalisieren, aber noch nicht. Firefox? Ach, ich weiß nicht. Bestenfalls wissen wir, dass sie es vor all den Entlassungen als "Worth Prototyping" (Prototyping-würdig) eingestuft haben.
Dies wird auch bei einem seltsamen Fallback-Problem mit CSS-Custom-Properties helfen, das wir im Newsletter erwähnt haben.
Wie bei jeder anderen benutzerdefinierten Eigenschaft können Sie Werte abrufen (mit var) oder setzen (schreiben/überschreiben), aber mit Houdini-Custom-Properties, wenn Sie einen falsey-Wert setzen, wenn Sie ihn überschreiben, sendet die CSS-Rendering-Engine den ursprünglichen Wert (seinen Fallback-Wert), anstatt die Zeile zu ignorieren.
Ich liebe das! Ich war dem JavaScript-Teil von Houdini nicht besonders zugetan, aber das hat mich definitiv begeistert!
Meine Reaktion war "ooiyes ja ja"! Ich fühlte mich damit gesegnet. Da CSS-Tricks immer wieder eine Überraschung bereithält, kenne ich das gut. Danke, Chris.
Ich habe gestern gerade über Typed OM gesprochen und wie sein JS-Ansatz seine Zustimmung beeinträchtigen könnte.
Lustig, das macht mehr Sinn.
Gibt es eine Spezifikation?
Beide Animationen funktionieren im neuesten Chrome Canary (Version 87.0.4254.2). Danke für die Einblicke. Daumen drücken, dass sie es in allen anderen Browsern implementieren.
Es funktioniert auch in Chrome v85, sowohl bei Farb- als auch bei Farbstopp-Übergängen. Ich verstehe den Teil nicht "Hinweis [...] Ich versuche auch, die Farbe zu animieren, was immer noch nicht funktioniert. Ich nahm an, dass es mit dieser neuen Funktion funktionieren würde."
Ein kleines CodePen, das erklärt, wie die Vererbung von @property mit der Standard-Eigenschaftenvererbung funktioniert. Etwas, das in den ersten paar Malen, wenn Sie diese Funktion verwenden, Verwirrung stiften wird.
Selbst der Prozentsatz für den Farbstopp hat keinen sanften Übergang, wenn wir Keyframe-Animationen anstelle von Übergängen verwenden.
Haben Sie eine Idee, wie wir das in Keyframes zum Laufen bringen können?