Houdini CSS - Division eines <number> Wertes
Rolf B
- css
Hallo alle,
die registrierten Properties aus Houdini CSS sind nichts für schwache Nerven. Ich habe dieses CSS:
@property --wert1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wert2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --weg1 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --weg2 { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root {
--wert1: 149;
--wert2: calc(var(--wert) / 100);
--weg1: calc(var(--wert1) / 100 * 5em);
--weg2: calc(var(--wert2) * 5em);
}
span { display: inline-block; } /* damit transform etwas tut */
#foo { transform: translateY(var(--weg1)); }
#bar { transform: translateY(var(--weg2)); }
Also: Für weg1 wird alles in einem Rutsch berechnet, bei weg2 wird die Division separat ausgeführt und zwischengespeichert.
Und nun dieses HTML:
<span id="foo">Huhu</span><span id="bar">Hallo</span>
Stehen beide spans auf einer Höhe? Na? Was meint ihr?
Wenn ihr das ausprobieren wollt, beachtet bitte dies
Ich habe mal einen Chromium-Bug dazu aufgemacht - wenn ihr das auch als Bug seht, gebt ihm gerne ein Sternchen. Oder erklärt mir, warum es kein Bug ist…
Ein weiterer Punkt: Das Schöne an registrierten Properties ist ja, dass man sie animieren kann. Zusammen mit calc ist es aber nicht mehr ganz so einfach:
@property --wert1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --weg1 { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root {
--wert1: 149;
--weg1: calc(var(--wert1) / 100 * 5em);
}
@keyframes transdown { from { --wert1: 0; } to { --wert2: 500} }
#foo {
display: inline-block;
transform: translateY(var(--weg1));
animation: transdown 1s ease-in-out alternate infinite;
}
Die Keyframes-Animation variiert --wert1 zwischen 0 und 500. Aber das #foo Element rührt sich nicht. Ist irgendwo auch logisch, die Animation erzeugt das variierende --wert1 in #foo und --weg1 ist in :root, verwendet also das dortige --wert1. Das nicht animiert wird.
Lösung 1: Verschiebe die animation-Eigenschaft nach :root Lösung 2: Verschiebe die --weg1 Zuweisung nach #foo
Was merkwürdigerweise nicht hilft, ist das Entfernen der @property Deklaration für --weg1. Eigentlich müsste das gehen, denn nun enthält --weg1 nicht mehr den berechneten Wert, sondern den calc-Ausdruck als CssUnparsedValue, und bisher hatte ich custom propertys so verstanden, dass sie mit einem #define aus C vergleichbar sind (nicht ganz, an der Stelle wo das var() steht muss auch vor der Property-Einsetzung immer noch valide CSS Syntax stehen). Aber offenbar übernimmt --weg1 den Inhalt von --wert1 nicht von der Stelle, wo es eingesetzt wird, sondern von dort, wo es definiert wurde. Schade. Ist das ein Bug? Gibt die Spec was her?
Rolf