Michaël Vanderheyden
banner
th3s4mur41.me
Michaël Vanderheyden
@th3s4mur41.me
Lead UX Engineer | CPWA | Web Dev | A11y | Martial arts lover | Shotokan Karate black belt | #BJJ practitioner | Bikejöring
Reposted by Michaël Vanderheyden
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!

webkit.org/blog/17660/i...
Introducing CSS Grid Lanes
It’s here!
webkit.org
December 19, 2025 at 9:33 PM
Reposted by Michaël Vanderheyden
Been catching up on @amyhupe.bsky.social's wonderful Systems of Harm podcast and really enjoyed this episode with @tink.uk. Covers a lot from #a11y to #AI and I always find Léonie's perspective valuable.

systems-of-harm.fireside.fm/ep2-leonie-w...
Design systems and accessibility with Léonie Watson
How can design systems help us to create more accessible user experiences? How can we win hearts and minds in the fight to create more equitable experiences for disabled people? Will AI help or hinder...
systems-of-harm.fireside.fm
December 19, 2025 at 7:46 PM
TIL the first rule of ARIA—don’t use ARIA—applies to aria-busy too. Even when used right, it’s inconsistent across assistive tech. Thanks @gerardkcohen.me for the insight!
gerardkcohen.me/writing/2025...
#a11y #aria #aria-busy #TIL
aria-busy is not your friend | Writing | gerardkcohen.me
aria-busy is a misunderstood and misused property. Learn what it really does and whether or not you should be using it.
gerardkcohen.me
December 12, 2025 at 12:57 PM
Reposted by Michaël Vanderheyden
CSS text-decoration-inset landed in Firefox 146! Here's how it works:
December 11, 2025 at 5:11 PM
Reposted by Michaël Vanderheyden
There’s a lot of cases where I needed this, so I’m very excited to seeing `random()` come to CSS.

While trying it out, however, I found the caching strategy options to be very confusing … so I am proposing to rename some of the keywords: github.com/w3c/csswg-dr...

Any Hot Takes™ on this?
December 5, 2025 at 2:14 PM
Reposted by Michaël Vanderheyden
voted ⭐️
and others should too

Chromium
issues.chromium.org/issues/41208...

Firefox (10 years ago!)
bugzilla.mozilla.org/show_bug.cgi...
Chromium
issues.chromium.org
December 4, 2025 at 6:22 AM
Reposted by Michaël Vanderheyden
Masonry, and a bunch of stuff you might not need a library for anymore.

By yours truly, on @smashingmagazine.com
Masonry: Things You Won’t Need A Library For Anymore — Smashing Magazine
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
www.smashingmagazine.com
December 2, 2025 at 4:04 PM
Reposted by Michaël Vanderheyden
Part one came out a little while ago, so hopefully the wait for part 2 was worth it 😁

piccalil.li/blog/a-pragm...
A pragmatic guide to modern CSS colours - part two
Kevin is back with the follow up to part one of this series. This time, Kevin goes deep on how functional the newer colour capabilities are in practice to hopefully, encourage more designers to use th...
piccalil.li
December 2, 2025 at 2:02 PM
Just read this great post by @anatudor.bsky.social on non‑square image blur: frontendmasters.com/blog/non-squ...

I thought attr()-tainted would be invalid at computed‑value time per spec? drafts.csswg.org/css-values-5...
What am I missing?

#CSS #attr @bram.us @jamessw.com @una.im
Non-Square Image Blur Extensions
I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler so...
frontendmasters.com
December 2, 2025 at 1:56 PM
Reposted by Michaël Vanderheyden
Tomorrow's the last day!
After 7 years of selling courses, I'm finally doing a Black Friday sale.

I'd held off for from doing sales in general for all this time, but had some smart people get me on board with it, so I figured if I'm going to do it, I'll go big:

40% off + Flexbox Simplified for free.
November 30, 2025 at 3:40 PM
Reposted by Michaël Vanderheyden
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...
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
cycos Christmas bash 🎄 came with custom mugs for everyone.
Mine? Sensei of A11y & Samurai of CSS 🥋☕
Perfect fit for my passion + Th3S4mur41.me.

Big thanks to Lars Hermanns for the creative titles & hand‑wrapped gifts!
#TeamCycos #Atos #A11y #CSS #WebDev #ChristmasSpirit #Th3S4mur41 #TeamSpirit
November 27, 2025 at 10:41 AM
Progressive Web Apps (PWAs) = build once, run everywhere. Push notifications, offline use, background updates + standalone app‑like windows after a simple “install.” The open web at its best.
But, there is a catch...
#PWA #WebDevs #WebInstallAPI
November 26, 2025 at 3:24 PM
@ahmadalfy.bsky.social makes a strong case: your URL is your state.
Instead of hiding state in cookies or local storage, the URL keeps it transparent, shareable, and part of your browsing history.

👉https://alfy.blog/2025/10/31/your-url-is-your-state.html

#WebDev #StateManagement #UX #A11y
Your URL Is Your State
A deep dive into how thoughtful URL design can enhance usability, shareability, and performance. Learn what state belongs in URLs, common pitfalls to avoid, and practical patterns for modern web apps.
alfy.blog
November 19, 2025 at 2:54 PM
Reposted by Michaël Vanderheyden
Good news!

Range syntax for style queries and if() functions has shipped in Chrome!

Check it out:

una.im/range-style-...
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
una.im
November 12, 2025 at 10:55 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
#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
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
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 👇
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
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
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...
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
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
October 24, 2025 at 12:02 PM
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
October 21, 2025 at 1:46 PM
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
October 20, 2025 at 4:05 AM
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...
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