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
Brecht De Ruyte
@utilitybend.com
· Oct 17
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
🚀 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...
utilitybend.com/blog/a-nativ...
And for the styling of things. Here are some first ideas. 😊 utilitybend.com/blog/an-upda...
February 13, 2026 at 4:36 PM
And for the styling of things. Here are some first ideas. 😊 utilitybend.com/blog/an-upda...
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
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...
Reposted by Brecht De Ruyte
Learn more: web.dev/blog/interop...
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
Learn more: web.dev/blog/interop...
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
Here's a quick rundown of what we delivered as part of Interop 2025, and what's planned for Interop 2026!
🚀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...
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
🚀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...
It's quite lengthy, but also contains some hot tips 🔥
utilitybend.com/blog/css-ani...
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/package/for-...
www.npmjs.com
February 11, 2026 at 12:23 PM
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/package/for-...
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...
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
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...
www.youtube.com/watch?v=nhbY...
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...
> 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
.@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...
> 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...
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
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
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...
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
Look at those outlines. 🔥 Hot tip!
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
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. 😅
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
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...
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
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.
Reposted by Brecht De Ruyte
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...
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
🏎️ 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...
by #TomRavenscroft at #Dezeen
Swedish car brand #Volvo + type studio @daltonmaag.com
#typography #Volvo #VolvoCentum
www.dezeen.com/2025/12/19/v...
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
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
Today is one of those days where I found myself needing this
utilitybend.com/blog/a-nativ... cc: @utilitybend.com
utilitybend.com/blog/a-nativ... cc: @utilitybend.com
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!! 🎉🥳
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)
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
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!! 🎉🥳
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!! 🎉🥳
The video is not that important, what is important is that this is a great conference! You should go 😁
To get in the #cssday mood, here's @utilitybend.com 's talk from last year:
www.youtube.com/watch?v=SsBC...
www.youtube.com/watch?v=SsBC...
Styling new HTML UI capabilities - Brecht De Ruyte - CSS Day 2025
YouTube video by Web Conferences Amsterdam
www.youtube.com
January 28, 2026 at 5:43 PM
The video is not that important, what is important is that this is a great conference! You should go 😁
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.
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
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.
So the going will be very slow this time.
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...
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
🚀 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...
utilitybend.com/blog/is-it-s...
Reposted by Brecht De Ruyte
a powerful #CSS transition technique enters the ring:
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
January 23, 2026 at 5:53 PM
a powerful #CSS transition technique enters the ring:
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
🚀 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...
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
🚀 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...
utilitybend.com/blog/is-it-s...
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...
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
We started publishing the #cssday 2025 talks, one each Wednesday for the next 12 weeks.
Today: Cyd Stumpel
www.youtube.com/watch?v=rPXS...
Today: Cyd Stumpel
www.youtube.com/watch?v=rPXS...
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.)
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
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.)
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.)