|
Top-level
 Here’s a video of it in action: a callback gets executed when – and only when – any of the tracked CSS properties (`--variable1`, `--variable2`, `display`, or `border-width`) their computed value changes. (Recorded in Safari because of that damn Chrome bug) 8 comments
The code is based on prior art by That library only works with Custom Properties and only works with numeric values though, whereas the updated `style-observer` I created works with any property that can have any value. Extra shout-out to @jaffathecake as well, for suggesting “some of the discrete value animation stuff” could possibly be used … https://github.com/w3c/csswg-drafts/issues/8982#issuecomment-2317203434 Winging back to the Chrome bug I mentioned, here’s the issue: `allow-discrete` erroneously does not work on custom properties – https://issues.chromium.org/issues/360159391 There technically is a workaround for it (by animating `content`) but I haven’t been able to consistently make it work. Gonna see who I can poke internally to get the ball rolling on it ;) UPDATE: Jake found a workaround to bypass that Chrome bug: register the custom property with @property. That works. But … Safari doesn’t like it. It seems to be stuck in a transition loop when the custom props is registered to contain string values ("<string>" or "*") 😕 Yesterday I collected all bugs I could find related to `transition-behavior: allow-discrete` onto a dedicated repo/site [^1] and also filed a bunch bugs. The WebKit team at Apple didn’t waste any time and moved really fast on this one, as the PR to fix the WebKit bugs [^2] is already merged in! 🤩👏 [^1]: https://allow-discrete-bugs.netlify.app/ |
Gregory's Server
The code looks like this:
```
const properties = ['--variable1', '--variable2', 'display', 'border-width'];
const cssStyleObserver = new CSSStyleObserver(properties, console.log);
cssStyleObserver.attach(document.body);
```
That’s it 😊