Brecht De Ruyte
banner
utilitybend.com
Brecht De Ruyte
@utilitybend.com
Google Developer Expert | Front-end Developer at iO | blog owner https://utilitybend.com | guest writer at Smashing Magazine | father | geek | photography enthousiast | oklchroma.utilitybend.com
Pinned
🚀 There should be a native way to have more than one thumb on a range slider. For this, I need your help. I created a starting point and would love you all to talk about it and give some feedback. It still has a lot of room to grow. Let's slide! 🛝 👍

utilitybend.com/blog/a-nativ...
A native way of having more than one thumb on a range slider in HTML | utilitybend
Accessible and styled multi-handle range sliders in HTML? We should explore this option. And I need your help!
utilitybend.com
And for the styling of things. Here are some first ideas. 😊 utilitybend.com/blog/an-upda...
February 13, 2026 at 4:36 PM
Strange how nobody found the Easter egg/hidden message in the demo yet 🤔 (or didn't bother to let me know 😅) utilitybend.com/blog/css-ani...
CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match! | utilitybend
CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience. A Valentine's special.
utilitybend.com
February 13, 2026 at 6:03 AM
Reposted by Brecht De Ruyte
Interop 2026: Continuing to improve the web for developers  |  Blog  |  web.dev
Learn about the features included in Interop 2026.
web.dev
February 12, 2026 at 5:26 PM
Reposted by Brecht De Ruyte
Here's a quick rundown of what we delivered as part of Interop 2025, and what's planned for Interop 2026!
February 12, 2026 at 5:32 PM
🚀Do we like scroll-driven animations? yes! Do we want scroll-triggered animations? Also yes! Would it be cool to combine them? Ow hell yes! And that's just what I did in this year's Valentine's article, enjoy! ❤️❤️

It's quite lengthy, but also contains some hot tips 🔥

utilitybend.com/blog/css-ani...
CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match! | utilitybend
CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience. A Valentine's special.
utilitybend.com
February 12, 2026 at 10:48 AM
A few years ago, I created a web component that shows hearts on your website "just for funzies". There is always a little spike around this period of the year. I'd love to come across a place where it is actually used 😅 ❤️
www.npmjs.com/package/for-...
www.npmjs.com
February 11, 2026 at 12:23 PM
Hey @dylanbeatt.ie Thanks for the shout-out at @ndcconferences.com London. Great talk! Loved how you explained the standards work as well.
www.youtube.com/watch?v=nhbY...
Do It With Style: Rethinking CSS - Dylan Beattie - NDC London 2026
YouTube video by NDC Conferences
www.youtube.com
February 11, 2026 at 9:28 AM
Reposted by Brecht De Ruyte
.@veneman.dev was unhappy about the Web Almanac's missing CSS chapter and decided to roll their own! 👏😅

> I can’t crawl millions of websites like the HTTP Archive can, but I can do 100,000 and still make a pretty decent overview.

Let's see what's in there.🧵

www.projectwallace.com/the-css-sele...
February 9, 2026 at 4:31 PM
This select demo by @nerdy.dev is so nice 🤩 the combination of techniques is a joy to read through as well! nerdy.dev/nice-select
Nice Select · February 3, 2026
Building a modern custom select with base-select.
nerdy.dev
February 8, 2026 at 7:47 AM
Look at those outlines. 🔥 Hot tip!
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).

This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.

Demo: codepen.io/una/pen/ByzY...
February 5, 2026 at 8:10 PM
For the last few years I have always created a valentine's post... Most of the time it's related to scrolling. For this year... I'm probably biting off more than I can chew. 😅
February 4, 2026 at 8:14 AM
I've been thinking about writing my thoughts on AI and LLMs... I am not against it, I think I have realistic fears and see realistic potentials (balanced) But seriously... There is already so much of that so who cares...
January 31, 2026 at 9:54 PM
Just finished running my first 4-evenings D&D campaign as a GM. Made some mistakes, got better during the days, but still need to grow. 😅 Still a noob, but respect to all GM's out there.
January 30, 2026 at 10:59 PM
Reposted by Brecht De Ruyte
The CSSWG just resolved to add this to the spec 🥳

github.com/w3c/csswg-dr...
January 29, 2026 at 11:18 PM
Reposted by Brecht De Ruyte
🏎️ Volvo creates "instantly readable" typeface to improve driver safety
by #TomRavenscroft at #Dezeen
Swedish car brand #Volvo + type studio @daltonmaag.com
#typography #Volvo #VolvoCentum

www.dezeen.com/2025/12/19/v...
January 29, 2026 at 9:20 PM
Reposted by Brecht De Ruyte
Today is one of those days where I found myself needing this
utilitybend.com/blog/a-nativ... cc: @utilitybend.com
A native way of having more than one thumb on a range slider in HTML | utilitybend
Accessible and styled multi-handle range sliders in HTML? We should explore this option. And I need your help!
utilitybend.com
January 29, 2026 at 2:13 PM
Reposted by Brecht De Ruyte
We'll be getting multiple outlines in #CSS!!

Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌

Finally!! This is such great news!! 🎉🥳
🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated!

But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?

(it needs to be the same across borders and outlines or different box-sizing values)
January 29, 2026 at 4:37 AM
First devs.gent of the year 💯
January 28, 2026 at 6:59 PM
The video is not that important, what is important is that this is a great conference! You should go 😁
January 28, 2026 at 5:43 PM
Reposted by Brecht De Ruyte
Well, CSS Day is live now ( https://cssday.nl ) and I've got a bunch of related things to do but unfortunately I'm ill and can hardly concentrate.

So the going will be very slow this time.
CSS Day 2026, 11th & 12th of June, Amsterdam
CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.
cssday.nl
January 27, 2026 at 10:52 AM
Reposted by Brecht De Ruyte
🚀 Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries. In Chrome 144, this has gotten a little update, so I thought it to be a good time to revisit. #CSS has once again gotten the keys to the state-machine, and it's fantastic!
utilitybend.com/blog/is-it-s...
Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries | utilitybend
Learn how CSS @container scroll-state queries let you detect stuck, snapped, scrollable, and scrolled states without JavaScript. Available in Chrome 144.
utilitybend.com
January 23, 2026 at 11:24 AM
Reposted by Brecht De Ruyte
a powerful #CSS transition technique enters the ring:

Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
January 23, 2026 at 5:53 PM
🚀 Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries. In Chrome 144, this has gotten a little update, so I thought it to be a good time to revisit. #CSS has once again gotten the keys to the state-machine, and it's fantastic!
utilitybend.com/blog/is-it-s...
Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries | utilitybend
Learn how CSS @container scroll-state queries let you detect stuck, snapped, scrollable, and scrolled states without JavaScript. Available in Chrome 144.
utilitybend.com
January 23, 2026 at 11:24 AM
Reposted by Brecht De Ruyte
We started publishing the #cssday 2025 talks, one each Wednesday for the next 12 weeks.

Today: Cyd Stumpel

www.youtube.com/watch?v=rPXS...
CSS tried to come for my Job - Cyd Stumpel - CSS Day 2025
YouTube video by Web Conferences Amsterdam
www.youtube.com
January 21, 2026 at 2:46 PM
Reposted by Brecht De Ruyte
Made a lil' library:
codepen.github.io/slideVars/

Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM