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...
🚀❄️ 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
I have a visual of an article...
To press the publish button, or not to press the publish button 🤔
To press the publish button, or not to press the publish button 🤔
December 4, 2025 at 10:36 AM
I have a visual of an article...
To press the publish button, or not to press the publish button 🤔
To press the publish button, or not to press the publish button 🤔
Barbecue, D&D, and UI. This episode is packed with my favourite things. But one thing I'm extremely happy about is that @shoptalkshow.com talked about from #OpenUI. Thank you for the nice words as well! Let's make this happen (even if it is in 2030). www.youtube.com/watch?v=rx3g...
Hobbies, Puzzle Game Circuit, and Web Monetization News (ep693)
YouTube video by ShopTalk Show
www.youtube.com
December 1, 2025 at 3:54 PM
Barbecue, D&D, and UI. This episode is packed with my favourite things. But one thing I'm extremely happy about is that @shoptalkshow.com talked about from #OpenUI. Thank you for the nice words as well! Let's make this happen (even if it is in 2030). www.youtube.com/watch?v=rx3g...
Reposted by Brecht De Ruyte
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev
November 29, 2025 at 9:52 PM
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
🚀 I made a holiday wishlist for DevTools in November! Because I can 😀 What's the thing you'd like to see to simplify your CSS/layout debugging?
utilitybend.com/blog/5-css-d...
#Chrome #DevTools #CSS
cc @developer.chrome.com
utilitybend.com/blog/5-css-d...
#Chrome #DevTools #CSS
cc @developer.chrome.com
5 CSS debugging features I want to see in Chrome DevTools - Holidays list | utilitybend
A wish list of 5 CSS debugging features I want to see in Chrome DevTools, from better positioning tools to scroll-driven animations panel and design tools integration.
utilitybend.com
November 28, 2025 at 1:46 PM
🚀 I made a holiday wishlist for DevTools in November! Because I can 😀 What's the thing you'd like to see to simplify your CSS/layout debugging?
utilitybend.com/blog/5-css-d...
#Chrome #DevTools #CSS
cc @developer.chrome.com
utilitybend.com/blog/5-css-d...
#Chrome #DevTools #CSS
cc @developer.chrome.com
And all the way from Switzerland we have Yves, giving us a look into Loch Ness CMS. @devs.gent
November 26, 2025 at 7:49 PM
And all the way from Switzerland we have Yves, giving us a look into Loch Ness CMS. @devs.gent
Reposted by Brecht De Ruyte
What are everyone's thoughts on WebKit's `<input type=checkbox switch>` control? Is it something you want other browsers to ship?
November 14, 2025 at 4:00 PM
What are everyone's thoughts on WebKit's `<input type=checkbox switch>` control? Is it something you want other browsers to ship?
November 15, 2025 at 9:57 AM
