Prop For That: A New Tool That Exposes Browser-State Data as Live CSS Custom Properties
By
@geoffreygraham
Summary
Adam Argyle, creator of Open Props, introduces "Prop For That" — a new tool that generates live CSS custom properties (props) for things the browser can't natively detect, such as cursor position, scroll velocity, current time, form states, and progress values. The tool handles the JavaScript logic behind the scenes so developers can use these dynamic values directly in CSS.
Source
CSS-TricksProp For That: A New Tool That Exposes Browser-State Data as Live CSS Custom Propertiescss-tricks.comKey quotes
· 5 pulledNo 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
You might also wanna read
CSS @scope Rule: A Native Solution for Scoped Styles and Component Isolation
The article discusses the new CSS @scope rule as a solution to the challenges of maintaining CSS in complex modern interfaces. It explains h
Smashing Magazine·5mo ago
Puck: Open-Source Visual Editor for React Applications
Puck is an open-source drag-and-drop visual editor for React that allows developers to create page builders for their React components and e
Product Hunt·10mo ago
Composify: Open-Source Library for Server Driven UI with Visual Editor for React Components
Composify is an open-source JavaScript library that enables Server Driven UI (SDUI) by adding a visual editor to React applications. It allo
github.com·6mo ago
Introducing Boss-CSS: A Polymorphic CSS-in-JS Library with Multiple Styling Approaches
Boss-CSS is a polymorphic CSS-in-JS library created by a developer to address limitations in existing CSS-in-JS solutions. The library suppo
dev.to·4mo ago
Tweaklify: A Chrome Extension for Visual DOM Prototyping and Live Style Editing
Tweaklify is a Chrome extension that enables visual DOM prototyping and live style editing directly in the browser. It provides a clean UI f
Product Hunt·1mo ago
CSS-Only Web Components: A JavaScript-Free Approach for Marketing Websites
The article argues against using traditional JavaScript-based web components for marketing websites, criticizing their JavaScript dependency
hawkticehurst.com·5mo ago
Comments
Sign in to join the conversation.
No comments yet. Be the first.