Prop For That | CSS-Methods

No secret that Adam’s all about props. Dude gave us Open Props whereas again for a slew of preconfigured variables for colour, shadows, sizing, typography, amongst a lot far more. Now he’s again with Prop For That, an identical sorta concept, however mind-blowing within the sense that it creates stay props based mostly 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 every 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 lined. The distinction is that we’re working with information attributes that set off the scripts:

...

And plop the related props into the kinds:

.mover {
  aspect-ratio: 1;
  width: 50px;
  background: crimson;
  place: absolute;
  left: calc(var(--live-pointer-x, 0) * 1px);
  high: calc(var(--live-pointer-y, 0) * 1px);
}

The demos are the place it’s at. Good lord, can Adam put collectively some elegant work.

Direct Hyperlink →