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
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...
Reposted by Brecht De Ruyte
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 8, 2025 at 5:08 PM
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
Yeeeeessss 🧡🧡🧡
December 7, 2025 at 3:05 PM
Yeeeeessss 🧡🧡🧡
Reposted by Brecht De Ruyte
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
December 5, 2025 at 6:48 AM
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
Reposted by Brecht De Ruyte
📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
December 4, 2025 at 8:15 PM
📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
I've been working a bit with Tailwind lately, and without jumping into a rage article, I took some time to gather my thoughts. It's not my favourite tool, but why? Here is an honest article on that:
utilitybend.com/blog/why-tai...
#CSS #Tailwind
utilitybend.com/blog/why-tai...
#CSS #Tailwind
Why Tailwind is great, why you might be missing out, and why it isn't for me | utilitybend
My honest look at Tailwind CSS: the benefits, the limitations, what you're missing out on, and why writing modern CSS might be the better choice.
utilitybend.com
December 4, 2025 at 11:23 AM
I've been working a bit with Tailwind lately, and without jumping into a rage article, I took some time to gather my thoughts. It's not my favourite tool, but why? Here is an honest article on that:
utilitybend.com/blog/why-tai...
#CSS #Tailwind
utilitybend.com/blog/why-tai...
#CSS #Tailwind