Prop For That

No secret that Adam’s all about props. Dude gave us Open Props a good while back for a slew of preconfigured variables for color, shadows, sizing, typography, among much much more. Now he’s back with Prop For That, a similar sorta idea, but mind-blowing in the sense that it creates live props based things CSS can’t normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity — you know, the stuff that JavaScript sniffs and passes to CSS.

My understanding is that all the script-y stuff is already in the background. All that’s needed is to import the library, declare it in HTML, then style away in CSS.

Like, here’s Chris a long while back with custom properties registered in JavaScript to track cursor position:

Prop For That has that nicely covered. The difference is that we’re working with data attributes that trigger the scripts:

<div class="mover" data-props-for="pointer">...</div>

And plop the relevant props into the styles:

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

The demos are where it’s at. Good lord, can Adam put together some classy work.

Prop For That originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.