Email or username:

Password:

Forgot your password?
Bramus's posts Post Back to profile
Bramus

I built a thing: A MutationObserver for CSS, powered by CSS Transitions and `transition-behavior: allow-discrete`.

github.com/bramus/style-observ

You can use this to track changes in any CSS Property, including Custom Properties (except in Chrome bc it has an `allow-discrete` bug 😭)

29 August at 19:36 | Open on front-end.social
10 comments
Jan van Hellemond :mastodon:
Bramus

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)

29 August at 19:47 | Open on front-end.social
Bramus

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 😊

29 August at 19:47 | Open on front-end.social
Bramus

The code is based on prior art by
Artem Godin: github.com/fluorumlabs/css-var

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.

29 August at 19:51 | Open on front-end.social
Bramus

Extra shout-out to @jaffathecake as well, for suggesting “some of the discrete value animation stuff” could possibly be used …

github.com/w3c/csswg-drafts/is

29 August at 19:54 | Open on front-end.social
Bramus

Winging back to the Chrome bug I mentioned, here’s the issue: `allow-discrete` erroneously does not work on custom properties – issues.chromium.org/issues/360

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 ;)

29 August at 19:58 | Open on front-end.social
Bramus
Bramus

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 "*") 😕

30 August at 9:02 | Open on front-end.social
Bramus

Here’s something nice by @matthewp built on top of all this: a Selector Matcher Observer powered by CSSStyleObserver.

When the element matches the given selector, a custom property gets flipped, triggering the callback attached to the CSSStyleObserver.

codepen.io/bramus/pen/zYVJBje

30 August at 13:38 | Open on front-end.social
Bramus

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]: allow-discrete-bugs.netlify.ap
[^2]: github.com/WebKit/WebKit/pull/

3 September at 18:34 | Open on front-end.social
Go Up