I cannot count the number of times in my career I wished I could run JS in response to CSS property changes, regardless of what triggered them: media queries, user actions, or even other JS. Use cases abound. Here are some of mine: Implement higher level custom properties in components, where one custom property changes multiple others in nontrivial ways (e.g. a --variant: danger that sets 10 color tokens). Polyfill missing CSS features Change certain HTML attributes via CSS (hello --aria-expanded!) The most recent time I needed this was to prototype an idea I had for Web Awesome, and I decided this was it: I’d either find a good, bulletproof solution, or I would build it myself. Spoiler alert: Oops, I did it again

Lea Verou

Style-observer is a new tool designed to detect CSS property changes and execute JavaScript in response, addressing limitations of previous methods. It performs feature detection to work around browser-specific bugs, supports throttling and aggregation, and has been exhaustively tested. The tool aims to provide a reliable solution for higher-level custom properties, polyfilling missing CSS features, and changing HTML attributes via CSS. Contributions for benchmarking are welcome.

Style-observer: observe CSS property changes, for reals • Lea Verou