No secret that Adam’s all about props. Dude gave us Open Props a superb whereas again for a slew of preconfigured variables for coloration, shadows, sizing, typography, amongst a lot rather more. Now he’s again with Prop For That, an identical sorta thought, however mind-blowing within the sense that it creates dwell props primarily based issues CSS can’t usually see within the browser. Issues like cursor place, progress values, sure kind states, present time, scroll velocity — you recognize, the stuff that JavaScript sniffs and passes to CSS.
My understanding is that each one the script-y stuff is already within the background. All that’s wanted is to import the library, declare it in HTML, then model away in CSS.
Like, right here’s Chris an extended whereas again with customized properties registered in JavaScript to trace cursor place:
Prop For That has that properly coated. The distinction is that we’re working with information attributes that set off the scripts:
...
And plop the related props into the types:
.mover {
aspect-ratio: 1;
width: 50px;
background: pink;
place: absolute;
left: calc(var(--live-pointer-x, 0) * 1px);
prime: calc(var(--live-pointer-y, 0) * 1px);
}The demos are the place it’s at. Good lord, can Adam put collectively some elegant work.
