Observing Style Changes (2024.09.25 @ devs.gent)

~

Table of Contents

• The Talk
• Slides
• Recording/Video
• Thanks!

~

# The Talk

The 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.

~

# Slides

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

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/Video

This 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.

~