Lea Verou, PhD

@lea.verou.me

17291 Followers 372 Following

I make things for making things. @leaverou@front-end.social on Mastodon, @leaverou elsewhere https://lea.verou.me

Features Score: 425 points
Of the 46 features mentioned in the survey, you have used 39 and
heard of 7 more, which puts you in the top 1% of all respondents. Well
done!

The P3 gamut at L=0.73, pic from https://apps.colorjs.io/gamut/?color=oklch(73%%200.22186%20201)

Screenshot of Google Calendar with one item starting at 9am: CSS Day START PANICKING

@mixin --foo(--arg <length>) {
@result {
&, & > h2, & + p {
width: var(--arg);
}
}
}

div {
@apply --foo(10em);
font-size: 10px;
}
div > h2 {
font-size: 20px;
}
div + p {
font-size: 30px;
}

Me: ok yeah I think we'll need VTs after all
Claude: Before going with VTs — have you considered @property? Registering --tilt as <angle> would make it natively transitionable, and since both the parent and children read the same variable, they'd stay in sync (no double-animation issue like with raw transition: transform):

@property --tilt {
syntax: "<angle>";
initial-value: deg;
inherits: true;

Then just transition: --tilt .4s ease-out on .equation-display. Much simpler than VTs for this specific case. Or do you want VTs because other things should animate too (factors moving, etc.)?

$let _resolve = import.meta.resolve.bind(import.meta); import.meta.resolve = function(specifier) { if (specifier === "foo") { specifier = "./foo.js"; } return _resolve(specifier); } console.log(import.meta.resolve("foo")); // works! import("foo").then(console.log); // nope$