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...
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.)
Reposted by Brecht De Ruyte
🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with chrome 145.😍
utilitybend.com/blog/an-upda...
utilitybend.com/blog/an-upda...
An update on customizable selects: the multiple select | utilitybend
Discover the upcoming multiple select in Chrome Canary. Better mouse and keyboard navigation, plus new styling possibilities with the customizable select.
utilitybend.com
January 15, 2026 at 8:06 AM
🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with chrome 145.😍
utilitybend.com/blog/an-upda...
utilitybend.com/blog/an-upda...
🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with chrome 145.😍
utilitybend.com/blog/an-upda...
utilitybend.com/blog/an-upda...
An update on customizable selects: the multiple select | utilitybend
Discover the upcoming multiple select in Chrome Canary. Better mouse and keyboard navigation, plus new styling possibilities with the customizable select.
utilitybend.com
January 15, 2026 at 8:06 AM
🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with chrome 145.😍
utilitybend.com/blog/an-upda...
utilitybend.com/blog/an-upda...
Reposted by Brecht De Ruyte
Do you grab a library because you need it or doubt the browser can handle it? 🌐
@utilitybend.com is here to prove it can. 💪 At WebExpo, he'll play with new UI capabilities and CSS features like anchoring, transitions, and scroll snapping to build custom selects that stay fast and accessible.
@utilitybend.com is here to prove it can. 💪 At WebExpo, he'll play with new UI capabilities and CSS features like anchoring, transitions, and scroll snapping to build custom selects that stay fast and accessible.
Select it! Styling new HTML UI capabilities
May 27-29, 2026
webexpo.net
January 14, 2026 at 5:41 PM
Do you grab a library because you need it or doubt the browser can handle it? 🌐
@utilitybend.com is here to prove it can. 💪 At WebExpo, he'll play with new UI capabilities and CSS features like anchoring, transitions, and scroll snapping to build custom selects that stay fast and accessible.
@utilitybend.com is here to prove it can. 💪 At WebExpo, he'll play with new UI capabilities and CSS features like anchoring, transitions, and scroll snapping to build custom selects that stay fast and accessible.
Reposted by Brecht De Ruyte
📢 New blog post: A polyfill for the HTML switch element.
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
A polyfill for the HTML switch element
The personal blog of Thomas Steiner
blog.tomayac.com
January 12, 2026 at 11:55 AM
📢 New blog post: A polyfill for the HTML switch element.
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Reposted by Brecht De Ruyte
CSS masonry (aka grid-lanes) has two orientations: rows and columns.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
January 9, 2026 at 5:52 PM
CSS masonry (aka grid-lanes) has two orientations: rows and columns.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
My 7-year old just asked me what the internet actually is... Wait, let me get my pen!
January 9, 2026 at 3:33 PM
My 7-year old just asked me what the internet actually is... Wait, let me get my pen!
Reposted by Brecht De Ruyte
I am building a utility library of some sorts (in TypeScript) and am looking for inspiration on how to structure things and what to export.
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
January 9, 2026 at 2:10 PM
I am building a utility library of some sorts (in TypeScript) and am looking for inspiration on how to structure things and what to export.
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
A while ago, I wrote about why Tailwind isn't for me. In that article, I also referred to the people building it, who clearly have a love for CSS, but a different vision than mine. It's a sad thing that so many people were laid off due to the impact of AI, no matter if you are pro-tailwind or not.
January 8, 2026 at 3:39 PM
A while ago, I wrote about why Tailwind isn't for me. In that article, I also referred to the people building it, who clearly have a love for CSS, but a different vision than mine. It's a sad thing that so many people were laid off due to the impact of AI, no matter if you are pro-tailwind or not.
Reposted by Brecht De Ruyte
CSS Day, 11th and 12th of June, just announced @brucel.bsky.social and @ohhelloana.blog as their 2026 MCs.
cssday.nl
Ticket sales will open later this month. We'll announce the early-bird tickets on our mailing list first. Subscribe to be notified ASAP!
cssday.nl/subscribe
cssday.nl
Ticket sales will open later this month. We'll announce the early-bird tickets on our mailing list first. Subscribe to be notified ASAP!
cssday.nl/subscribe
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 8, 2026 at 1:34 PM
CSS Day, 11th and 12th of June, just announced @brucel.bsky.social and @ohhelloana.blog as their 2026 MCs.
cssday.nl
Ticket sales will open later this month. We'll announce the early-bird tickets on our mailing list first. Subscribe to be notified ASAP!
cssday.nl/subscribe
cssday.nl
Ticket sales will open later this month. We'll announce the early-bird tickets on our mailing list first. Subscribe to be notified ASAP!
cssday.nl/subscribe
Reposted by Brecht De Ruyte
// clears throat
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
January 6, 2026 at 11:27 AM
// clears throat
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
Reposted by Brecht De Ruyte
January 7, 2026 at 8:34 AM
Reposted by Brecht De Ruyte
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
groups.google.com
January 6, 2026 at 2:36 PM
Gecko: Intent to Prototype: "Customizable Select"
Now this is a fun lunch break! (The cat didn't agree)
January 7, 2026 at 11:36 AM
Now this is a fun lunch break! (The cat didn't agree)
🚀❄️ Yep, another "holidays" blog article. As tradition, I always try to create a little "happy holidays" card as well, with something new and shiny in CSS. In the past, I did scroll-driven animations and masks, but this time, the corner-shape property in CSS. Happy Holidays, ya'll 🎆
CSS corner-shape, books, talks, and happy holidays | utilitybend
My 2025 year in review: 13 conferences, book picks, the struggles and wins, plus a festive CSS corner-shape demo. Happy holidays!
utilitybend.com
December 19, 2025 at 11:55 AM
🚀❄️ Yep, another "holidays" blog article. As tradition, I always try to create a little "happy holidays" card as well, with something new and shiny in CSS. In the past, I did scroll-driven animations and masks, but this time, the corner-shape property in CSS. Happy Holidays, ya'll 🎆
Reposted by Brecht De Ruyte
Usable listboxes!!! (Plus styleable as a nice bonus) This includes multi-select in listbox mode.
December 16, 2025 at 10:26 PM
Usable listboxes!!! (Plus styleable as a nice bonus) This includes multi-select in listbox mode.
Reposted by Brecht De Ruyte
That nice @utilitybend.com of the Open UI group (that gave HTML new fancy
[Range] Multi-handle necessity and scalability guidelines (3+ Thumbs) · Issue #1337 · openui/open-ui
While dual-handle usage (min/max price filters) is the most common use case, the foundation of the API supports adding more than two handles. Community feedback provides specific, validated use cas...
github.com
December 15, 2025 at 5:41 PM
That nice @utilitybend.com of the Open UI group (that gave HTML new fancy
Reposted by Brecht De Ruyte
🎙️LET'S GET READY TO RUMBLE! It's been one of DevTool's most requested features… weighing at eiiighty-five votes… 10 years in the making… entering the ring from Chrome 144… Heeeerre's: Individual request throttling!!!
developer.chrome.com/blog/throttl...
🥊 It's a knockout! The crowd does wild! 👏🙌🎉🥳
developer.chrome.com/blog/throttl...
🥊 It's a knockout! The crowd does wild! 👏🙌🎉🥳
Throttle individual network requests | Blog | Chrome for Developers
Use the Request conditions tab to block specific URLs or apply custom network throttling profiles to individual resources.
developer.chrome.com
December 15, 2025 at 4:19 PM
🎙️LET'S GET READY TO RUMBLE! It's been one of DevTool's most requested features… weighing at eiiighty-five votes… 10 years in the making… entering the ring from Chrome 144… Heeeerre's: Individual request throttling!!!
developer.chrome.com/blog/throttl...
🥊 It's a knockout! The crowd does wild! 👏🙌🎉🥳
developer.chrome.com/blog/throttl...
🥊 It's a knockout! The crowd does wild! 👏🙌🎉🥳
Purple sky in my hometown ♥️
December 14, 2025 at 5:09 PM
Purple sky in my hometown ♥️
Reposted by Brecht De Ruyte
ICYMI, some considerations for how to make CSS Carousels accessible:
developer.chrome.com/blog/accessi...
developer.chrome.com/blog/accessi...
Make accessible carousels | Blog | Chrome for Developers
How the features in CSS Overflow 5 can help you create more accessible carousel patterns.
developer.chrome.com
December 14, 2025 at 9:31 AM
ICYMI, some considerations for how to make CSS Carousels accessible:
developer.chrome.com/blog/accessi...
developer.chrome.com/blog/accessi...
"The author of the Smashing Magazine post may simply be taking Google at its word and that’s unfortunate for his credibility as well as the devs who read it." would love to have a chat! But not with people who directly hit below the belt. With all due respect: I believe in educating, not trolling.
December 14, 2025 at 7:20 AM
"The author of the Smashing Magazine post may simply be taking Google at its word and that’s unfortunate for his credibility as well as the devs who read it." would love to have a chat! But not with people who directly hit below the belt. With all due respect: I believe in educating, not trolling.
Reposted by Brecht De Ruyte
Some tips on how and why we teach our students from @fdnd.nl, to implement progressive enhancement in their work! 🎓
cydstumpel.nl/why-we-teach...
cydstumpel.nl/why-we-teach...
Why we teach our students progressive enhancement | Blog Cyd Stumpel
With new CSS features seemingly coming out every week, I’ve been doing more and more progressive enhancement (PE) in my projects. It’s also a big part of what we teach our students at the Associate De...
cydstumpel.nl
December 13, 2025 at 4:56 PM
Some tips on how and why we teach our students from @fdnd.nl, to implement progressive enhancement in their work! 🎓
cydstumpel.nl/why-we-teach...
cydstumpel.nl/why-we-teach...
Reposted by Brecht De Ruyte
Did you know that Firefox dev tools include a thing that tells you about power consumption?
In the screenshot below you can see:
Power: 131mW
Energy used in the visible range: 4.8 μWh (0.002 mg CO_2e)
In the screenshot below you can see:
Power: 131mW
Energy used in the visible range: 4.8 μWh (0.002 mg CO_2e)
December 10, 2025 at 8:21 PM
Did you know that Firefox dev tools include a thing that tells you about power consumption?
In the screenshot below you can see:
Power: 131mW
Energy used in the visible range: 4.8 μWh (0.002 mg CO_2e)
In the screenshot below you can see:
Power: 131mW
Energy used in the visible range: 4.8 μWh (0.002 mg CO_2e)
One of those features I won't use regularly, but it is just good that it exists. Happy to see it land in Firefox. Great example by @jakearchibald.com as well!
CSS @scope has landed in Firefox 146, making it a new baseline feature. Here's how it works:
December 9, 2025 at 7:03 PM
One of those features I won't use regularly, but it is just good that it exists. Happy to see it land in Firefox. Great example by @jakearchibald.com as well!
🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications.
www.smashingmagazine.com/2025/12/stat...
www.smashingmagazine.com/2025/12/stat...
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine
CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights a...
www.smashingmagazine.com
December 9, 2025 at 1:39 PM
🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications.
www.smashingmagazine.com/2025/12/stat...
www.smashingmagazine.com/2025/12/stat...