Me, on stage. Photo by devs.gent.Today I gave a talk at the September 2024 devs.gent meetup on how to observe and respond to Style Changes.

~

Table of Contents* The Talk * Slides * Recording/Video * Thanks!

~

The TalkThe talk I gave was about half an hour and covered my journey into building @bramus/style-observer

A shortcoming of MutationObserver is that it cannot be used to subscribe to value changes of CSS properties.

While you could resort to requestAnimationFrame and getComputedStyle to plug that hole (which you shouldn’t), there is a more performant way to achieve this: leverage the power of CSS transitions in combination with the fairly recent transition-behavior: allow-discrete. With it, you can set up JavaScript callbacks to respond to changes in computed values of CSS properties – including Custom Properties.

This is basically a talkified version of this blog post.

~

SlidesThe slides of my talk are up on slidr.io are embedded below:

Watch the slides

These exported slides don’t contain any recordings of the demos included, but you can follow the links on the slides to check them out yourself.

~

Recording/VideoThis talk was recorded. Once the recording is released, I’ll update this post to include the embed.

~

Thanks!Thanks again to Bert, Elian, and Freek for having me. Always a pleasure to speak at a local meetup and meet new and old friends. Also a big kudos to Lemon for hosting, offering food and beverages, and providing a crew to record the talks.

~

💁‍♂️ If you are a conference or meetup organiser, don't hesitate to contact me to come speak at your event.