Michaël Vanderheyden
@th3s4mur41.me
Lead UX Engineer | CPWA | Web Dev | A11y | Martial arts lover | Shotokan Karate black belt | #BJJ practitioner | Bikejöring
Joining James Thurston this #WorldUsabilityDay to explore how we can train tech teams for #inclusiveAI.
Accessibility isn’t optional—it’s essential. Let’s share best practices and keep pushing for tech that works for everyone.
www.linkedin.com/posts/texasd...
#A11y #DigitalInclusion
Accessibility isn’t optional—it’s essential. Let’s share best practices and keep pushing for tech that works for everyone.
www.linkedin.com/posts/texasd...
#A11y #DigitalInclusion
#dirisit #accessibility #worldusabilityday #event | Texas Department of Information Resources
The Statewide Digital Accessibility Program under DIR is hosting a half-day conference for World Usability Day on November 13, 2025, 9:00 am to noon.
Join us in exploring how public-sector digital s...
www.linkedin.com
November 10, 2025 at 6:45 PM
Joining James Thurston this #WorldUsabilityDay to explore how we can train tech teams for #inclusiveAI.
Accessibility isn’t optional—it’s essential. Let’s share best practices and keep pushing for tech that works for everyone.
www.linkedin.com/posts/texasd...
#A11y #DigitalInclusion
Accessibility isn’t optional—it’s essential. Let’s share best practices and keep pushing for tech that works for everyone.
www.linkedin.com/posts/texasd...
#A11y #DigitalInclusion
Reposted by Michaël Vanderheyden
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
October 30, 2025 at 2:36 PM
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
Reposted by Michaël Vanderheyden
I am also writing a series of articles to explain all the tricks I am using (and more!)
The first one is live 👇
The first one is live 👇
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
frontendmasters.com
October 30, 2025 at 6:51 PM
I am also writing a series of articles to explain all the tricks I am using (and more!)
The first one is live 👇
The first one is live 👇
Reposted by Michaël Vanderheyden
I'd recommend @tink.uk's talk from FFConf last year: ffconf.org/talks/2024_l... (sorry for the qusai FFConf promotion, but the talk is very very good)
AI & Accessibility: The Good, the Bad... - ffconf.org
Léonie Watson explores the realities of AI and accessibility, separating fact from hype at FFConf.
ffconf.org
October 28, 2025 at 4:57 PM
I'd recommend @tink.uk's talk from FFConf last year: ffconf.org/talks/2024_l... (sorry for the qusai FFConf promotion, but the talk is very very good)
Reposted by Michaël Vanderheyden
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context.
This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
docs.google.com
October 27, 2025 at 7:53 PM
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Just found a bug in @developer.chrome.com
subgrid doesn't work in fieldset...
github.com/webcompat/we...
What makes it worse, is that #DevTools don't display the grid lines in fieldset at all 😦
#WebCompat #subgrid #fieldset #bug
subgrid doesn't work in fieldset...
github.com/webcompat/we...
What makes it worse, is that #DevTools don't display the grid lines in fieldset at all 😦
#WebCompat #subgrid #fieldset #bug
October 24, 2025 at 12:02 PM
Just found a bug in @developer.chrome.com
subgrid doesn't work in fieldset...
github.com/webcompat/we...
What makes it worse, is that #DevTools don't display the grid lines in fieldset at all 😦
#WebCompat #subgrid #fieldset #bug
subgrid doesn't work in fieldset...
github.com/webcompat/we...
What makes it worse, is that #DevTools don't display the grid lines in fieldset at all 😦
#WebCompat #subgrid #fieldset #bug
Reposted by Michaël Vanderheyden
Free For IAAP Members: Build Accessible Websites and Apps with Confidence
Start learning today: https://f.mtr.cool/xndrvbypdm
Join IAAP: https://f.mtr.cool/svmxkqjvco
#ProfessionalEducation #Accessibility #IAAP #InclusiveDesign #DigitalAccessibility
Start learning today: https://f.mtr.cool/xndrvbypdm
Join IAAP: https://f.mtr.cool/svmxkqjvco
#ProfessionalEducation #Accessibility #IAAP #InclusiveDesign #DigitalAccessibility
October 21, 2025 at 1:46 PM
Free For IAAP Members: Build Accessible Websites and Apps with Confidence
Start learning today: https://f.mtr.cool/xndrvbypdm
Join IAAP: https://f.mtr.cool/svmxkqjvco
#ProfessionalEducation #Accessibility #IAAP #InclusiveDesign #DigitalAccessibility
Start learning today: https://f.mtr.cool/xndrvbypdm
Join IAAP: https://f.mtr.cool/svmxkqjvco
#ProfessionalEducation #Accessibility #IAAP #InclusiveDesign #DigitalAccessibility
Reposted by Michaël Vanderheyden
Still fighting form controls with endless CSS? Tim Nguyen from Apple reveals upcoming improvements that will finally make them customizable with pure CSS #Forms #DevSummit25
Tim Nguyen at Dev Summit 25 bit.ly/3Iooh20
Tim Nguyen at Dev Summit 25 bit.ly/3Iooh20
October 20, 2025 at 4:05 AM
Still fighting form controls with endless CSS? Tim Nguyen from Apple reveals upcoming improvements that will finally make them customizable with pure CSS #Forms #DevSummit25
Tim Nguyen at Dev Summit 25 bit.ly/3Iooh20
Tim Nguyen at Dev Summit 25 bit.ly/3Iooh20
Reposted by Michaël Vanderheyden
🚀 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...
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
October 17, 2025 at 8:49 AM
🚀 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 Michaël Vanderheyden
📝 New CSS Article!
Do you know the linear() function? It's one of those underrated features that can do a lot of magic!
Combined with modern CSS, you can use it to create complex animations with a few lines of code.
Don't miss the opportunity to learn about it. 👇
Do you know the linear() function? It's one of those underrated features that can do a lot of magic!
Combined with modern CSS, you can use it to create complex animations with a few lines of code.
Don't miss the opportunity to learn about it. 👇
Let’s suppose you have some number of elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
Sequential linear() Animation With N Elements | CSS-Tricks
Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
css-tricks.com
October 15, 2025 at 2:14 PM
📝 New CSS Article!
Do you know the linear() function? It's one of those underrated features that can do a lot of magic!
Combined with modern CSS, you can use it to create complex animations with a few lines of code.
Don't miss the opportunity to learn about it. 👇
Do you know the linear() function? It's one of those underrated features that can do a lot of magic!
Combined with modern CSS, you can use it to create complex animations with a few lines of code.
Don't miss the opportunity to learn about it. 👇
CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
A pragmatic guide to modern CSS colours - part one
Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...
piccalil.li
October 15, 2025 at 2:09 PM
CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Reposted by Michaël Vanderheyden
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Interop Feature Ranking
Rank the web platform features you care most about
interop-rank.jakearchibald.com
October 9, 2025 at 5:00 PM
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Reposted by Michaël Vanderheyden
Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.
piccalil.li/blog/a-pragm...
piccalil.li/blog/a-pragm...
A pragmatic guide to modern CSS colours - part one
Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...
piccalil.li
October 7, 2025 at 11:06 AM
Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.
piccalil.li/blog/a-pragm...
piccalil.li/blog/a-pragm...
“Accessibility is not just for users with permanent disabilities. It’s about making every interaction smoother for everyone.”
That’s the heart of my chat with Brian Gavin, cofounder of WallyAX, on #BeyondBarriers. Thanks for the great exchange!
#A11y #InclusiveDesign #WCAG #EAA #WallyAX
That’s the heart of my chat with Brian Gavin, cofounder of WallyAX, on #BeyondBarriers. Thanks for the great exchange!
#A11y #InclusiveDesign #WCAG #EAA #WallyAX
September 30, 2025 at 1:16 PM
“Accessibility is not just for users with permanent disabilities. It’s about making every interaction smoother for everyone.”
That’s the heart of my chat with Brian Gavin, cofounder of WallyAX, on #BeyondBarriers. Thanks for the great exchange!
#A11y #InclusiveDesign #WCAG #EAA #WallyAX
That’s the heart of my chat with Brian Gavin, cofounder of WallyAX, on #BeyondBarriers. Thanks for the great exchange!
#A11y #InclusiveDesign #WCAG #EAA #WallyAX
Ran the Aachener Firmenlauf with my Cycos crew last Friday—sunny skies, great vibes, and a new personal best: 5:18"/km 🎉
Big thanks to everyone who ran or cheered. Already looking forward to the next one!
#TeamCycos #TeamAtos #AachenerFirmenlauf #12AFL #AFL #Aachen #KeepImproving
Big thanks to everyone who ran or cheered. Already looking forward to the next one!
#TeamCycos #TeamAtos #AachenerFirmenlauf #12AFL #AFL #Aachen #KeepImproving
September 22, 2025 at 2:45 PM
Ran the Aachener Firmenlauf with my Cycos crew last Friday—sunny skies, great vibes, and a new personal best: 5:18"/km 🎉
Big thanks to everyone who ran or cheered. Already looking forward to the next one!
#TeamCycos #TeamAtos #AachenerFirmenlauf #12AFL #AFL #Aachen #KeepImproving
Big thanks to everyone who ran or cheered. Already looking forward to the next one!
#TeamCycos #TeamAtos #AachenerFirmenlauf #12AFL #AFL #Aachen #KeepImproving
Reposted by Michaël Vanderheyden
Upvote this feature for Interop 2026: github.com/web-platform...
September 17, 2025 at 7:08 PM
Upvote this feature for Interop 2026: github.com/web-platform...
Reposted by Michaël Vanderheyden
Accessibility is one of those things that can feel a bit overwhelming when you start learning about it, so I had a conversation with @sarasoueidan.com where we talked all about it, including what it is, why it matters, how to get started learning more about it, and a lot more.
youtu.be/ndGKjhzmLXc
youtu.be/ndGKjhzmLXc
Navigating the World of Web Accessibility with Sara Soueidan
YouTube video by General Musings with Kevin Powell
youtu.be
September 12, 2025 at 2:06 PM
Accessibility is one of those things that can feel a bit overwhelming when you start learning about it, so I had a conversation with @sarasoueidan.com where we talked all about it, including what it is, why it matters, how to get started learning more about it, and a lot more.
youtu.be/ndGKjhzmLXc
youtu.be/ndGKjhzmLXc
Imagine a native pseudo‑class — :complete—that fires the instant an image (or any replaced element) successfully renders.
One line of CSS to swap a skeleton for the real deal. No extra scripts. Just cleaner, more performant design.
th3s4mur41.me/blog/css-com...
#CSS #WebDevs #csswg-drafts
One line of CSS to swap a skeleton for the real deal. No extra scripts. Just cleaner, more performant design.
th3s4mur41.me/blog/css-com...
#CSS #WebDevs #csswg-drafts
From Skeletons to Smooth Reveals: A Case for the :complete pseudo-class | Th3S4mur41.me
Personal website of Th3S4mur41 – developer, martial artist, and tech enthusiast.
th3s4mur41.me
September 11, 2025 at 12:15 PM
Imagine a native pseudo‑class — :complete—that fires the instant an image (or any replaced element) successfully renders.
One line of CSS to swap a skeleton for the real deal. No extra scripts. Just cleaner, more performant design.
th3s4mur41.me/blog/css-com...
#CSS #WebDevs #csswg-drafts
One line of CSS to swap a skeleton for the real deal. No extra scripts. Just cleaner, more performant design.
th3s4mur41.me/blog/css-com...
#CSS #WebDevs #csswg-drafts
#Interop2026 is open! My top picks so far:
- @container style()
- sibling-count() / sibling-index()
- Invoker API
- calc-size() / interpolate-size()
- field-sizing: content
Vote or propose here 👉 github.com/web-platform...
Let’s push the web forward!
#WebDevs #CSS #Browsers #WebCompat
- @container style()
- sibling-count() / sibling-index()
- Invoker API
- calc-size() / interpolate-size()
- field-sizing: content
Vote or propose here 👉 github.com/web-platform...
Let’s push the web forward!
#WebDevs #CSS #Browsers #WebCompat
web-platform-tests/interop
web-platform-tests Interop project. Contribute to web-platform-tests/interop development by creating an account on GitHub.
github.com
September 8, 2025 at 10:01 AM
#Interop2026 is open! My top picks so far:
- @container style()
- sibling-count() / sibling-index()
- Invoker API
- calc-size() / interpolate-size()
- field-sizing: content
Vote or propose here 👉 github.com/web-platform...
Let’s push the web forward!
#WebDevs #CSS #Browsers #WebCompat
- @container style()
- sibling-count() / sibling-index()
- Invoker API
- calc-size() / interpolate-size()
- field-sizing: content
Vote or propose here 👉 github.com/web-platform...
Let’s push the web forward!
#WebDevs #CSS #Browsers #WebCompat
I'm currently facing an issue with Subgrid and SVG in Firefox where the svg is overflowing out of the grid when inline-size is set to 75% and block-size is auto.
@jakearchibald.com any chance you could have a quick look at this one?
github.com/webcompat/we...
@jakearchibald.com any chance you could have a quick look at this one?
github.com/webcompat/we...
September 8, 2025 at 8:43 AM
I'm currently facing an issue with Subgrid and SVG in Firefox where the svg is overflowing out of the grid when inline-size is set to 75% and block-size is auto.
@jakearchibald.com any chance you could have a quick look at this one?
github.com/webcompat/we...
@jakearchibald.com any chance you could have a quick look at this one?
github.com/webcompat/we...
I’m all for solving problems with the best tool available—often that means replacing JavaScript with native HTML/CSS.
But sometimes, CSS-only solutions backfire, especially when it comes to accessibility. Just because it works visually doesn’t mean it works for everyone.
#A11y #CSS #WebDevs
But sometimes, CSS-only solutions backfire, especially when it comes to accessibility. Just because it works visually doesn’t mean it works for everyone.
#A11y #CSS #WebDevs
CSS-only Widgets Are Inaccessible
Usually. I originally titled this InacCSS-onlyible. I even made this typographically, er, distinct image. Then I realized it was silly and will instead use the neologism in a talk so I can hear the gr...
adrianroselli.com
September 4, 2025 at 2:52 PM
Reposted by Michaël Vanderheyden
Tip 1: If you're using anchor positioning in a reusable component, add an anchor-scope to the component to help your positioned element find the right anchor.
Tip 2: Sign up for my free email course on anchor positioning .
Tip 2: Sign up for my free email course on anchor positioning .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 3, 2025 at 8:25 PM
Tip 1: If you're using anchor positioning in a reusable component, add an anchor-scope to the component to help your positioned element find the right anchor.
Tip 2: Sign up for my free email course on anchor positioning .
Tip 2: Sign up for my free email course on anchor positioning .
Frameworks are tools, not gatekeepers: rethinking web developer hiring.
th3s4mur41.me/blog/framewo...
#WebDevs #Frameworks #WebStandards #Fundamentals #Hiring #Knowledge #Learning
th3s4mur41.me/blog/framewo...
#WebDevs #Frameworks #WebStandards #Fundamentals #Hiring #Knowledge #Learning
Frameworks are tools, not gatekeepers: Rethinking web developer hiring | Th3S4mur41.me
“Another week, another missed opportunity. A seasoned web developer, 20+ years of experience, expert in Angular, certified in accessibility, and a proven leader, was dismissed from a job application.”
th3s4mur41.me
September 1, 2025 at 11:39 AM
Frameworks are tools, not gatekeepers: rethinking web developer hiring.
th3s4mur41.me/blog/framewo...
#WebDevs #Frameworks #WebStandards #Fundamentals #Hiring #Knowledge #Learning
th3s4mur41.me/blog/framewo...
#WebDevs #Frameworks #WebStandards #Fundamentals #Hiring #Knowledge #Learning
Reposted by Michaël Vanderheyden
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
piccalil.li/blog/the-int...
piccalil.li/blog/the-int...
The interpolate-size property is a great example of progressive enhancement
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
piccalil.li
August 26, 2025 at 11:05 AM
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
piccalil.li/blog/the-int...
piccalil.li/blog/the-int...
Modern CSS is leveling up 💥
With @layer and soon @scope, we’re finally getting real control over specificity and style isolation—no more hacks or naming gymnastics.
Start your @layer journey with @miriam.codes's excellent guide: css-tricks.com/css-cascade-...
#CSS #WebDevs #CascadeLayers #DevTips
With @layer and soon @scope, we’re finally getting real control over specificity and style isolation—no more hacks or naming gymnastics.
Start your @layer journey with @miriam.codes's excellent guide: css-tricks.com/css-cascade-...
#CSS #WebDevs #CascadeLayers #DevTips
Cascade Layers Guide | CSS-Tricks
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity.
css-tricks.com
August 25, 2025 at 11:54 AM
Modern CSS is leveling up 💥
With @layer and soon @scope, we’re finally getting real control over specificity and style isolation—no more hacks or naming gymnastics.
Start your @layer journey with @miriam.codes's excellent guide: css-tricks.com/css-cascade-...
#CSS #WebDevs #CascadeLayers #DevTips
With @layer and soon @scope, we’re finally getting real control over specificity and style isolation—no more hacks or naming gymnastics.
Start your @layer journey with @miriam.codes's excellent guide: css-tricks.com/css-cascade-...
#CSS #WebDevs #CascadeLayers #DevTips