Sign in

Michaël Vanderheyden

@th3s4mur41.me
92 followers 191 following 325 posts

Lead UX Engineer & Accessibility Specialist @ cycos, an Atos Business #CPWA #WebDev #A11y #CSS Martial arts lover | Shotokan Karate black belt | BJJ practitioner | Bikejöring th3s4mur41.me

PostsRepliesMedia
Reposted by Michaël Vanderheyden
Bramus @bram.us · 25/09/2026
The time to ramp up your scroll-driven animations skills is **NOW** Go check scroll-driven-animations.style for and free 10-part video course created by yours truly, as well as a bunch of tools and demos.
scroll-driven-animations.style
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
311220
Reposted by Michaël Vanderheyden
Schalk Neethling @schalkneethling.com · 24/09/2026
The Navigation API - newly baseline | The Navigation API is newly baseline! The web now has sensible, low-level routing for navigations. www.youtube.com/shorts/fEq2A...
youtube.com
The Navigation API - newly baseline
YouTube video by Firefox for Web Developers
0103
Reposted by Michaël Vanderheyden
Kevin Powell @kevinpowell.co · 23/09/2026
It's annoying to keep hearing about cool CSS features only to find out browser support isn't great, so today I take a look at a bunch of features that have fantastic support, but people still turn to JS for instead. youtu.be/qu1jE41O_8o
youtu.be
Use these CSS features instead of JavaScript
YouTube video by Kevin Powell
210730
Reposted by Michaël Vanderheyden
Manuel Matuzović @matuzo.at · 23/09/2026
The CFP is open for 10 more days. So far, I have only 11 submissions, but I need at least 24. So, please share your ideas! First-time authors are very welcome!
21118
Reposted by Michaël Vanderheyden
Jake Archibald @jakearchibald.com · 23/09/2026
I've proposed "progressive image rendering" as a focus area for Interop 2027, so we can get progressive JPEG XL support in Safari, and progressive AVIF support in both Safari and Firefox. github.com/web-platform...
github.com
Progressive image rendering for JPEG XL and AVIF · Issue #1459 · web-platform-tests/interop
Description When we looked into JPEG XL, I asked developers why they were interested in the format, and the most common answer was "progressive rendering". This is now working in Firefox and Chrome...
3629
Michaël Vanderheyden @th3s4mur41.me · 23/09/2026
A single HTML attribute can transform your site's screen reader accessibility... Setting the lang attribute correctly ensures proper pronunciation instead of gibberish delivered with a bad accent. Check out my new post to learn why it matters: th3s4mur41.me/blog/a11y-ti...
th3s4mur41.me
Language Attribute: Setting the Right Context
Learn how the HTML lang attribute improves screen reader pronunciation, supports multilingual accessibility, and enables language-aware testing across browsers
001
Reposted by Michaël Vanderheyden
Lea Verou, PhD @lea.verou.me · 14/09/2026
🎨 Ever wondered why oklch() is so odd? Why adjusting L doesn't produce good color ramps? And why TF is L=100% not white?! I just wrote a thorough explanation of why this happens¹: github.com/web-platform... 👍 Upvote if you want this fixed in browsers in 2027! ¹ Spoiler: it’s lack of gamut mapping
Illustration of the problem (screenshot from issue)
23013
Reposted by Michaël Vanderheyden
Patrick Brosset @patrickbrosset.com · 11/09/2026
Interop 2027 prep is now. Want to help? 1. Go to developer-signals.rviscomi.workers.dev 2. Sign-in using GitHub 3. Find features you need 4. Click the comment icon, add your use case 5. Submit There aren't many ways to tell browsers what you need and why you need them. That's a very effective one.
The website, showing a list of web features and a search tool. The title says Shape what browsers build next. The github sign-in button is highlighted as step 1. The speech bubble icon on one of the features is highlighted as step 2.The website, a feature has been selected, and the Provide developer signal dialog is displayed. The use case text input field is highlighted as step 3. The workaround text input field is highlighted as optional. And the submit button is highlighted as step 4.
32311
Michaël Vanderheyden @th3s4mur41.me · 10/09/2026
There are a few things you really need to know to avoid going crazy debugging CSS. That's one of them!
040
Michaël Vanderheyden @th3s4mur41.me · 09/09/2026
EnergyID is deprecating their legacy webhooks at the end of the month! ⚠️ To keep your setup running, I've replaced hw2energyid with hw-hooks (available on npm & Docker). Check out the update and migration details on @npmx.dev: npmx.dev/package/hw-h... and @github.com: github.com/Th3S4mur41/h...
github.com
GitHub - Th3S4mur41/hw-hooks: A tool to synchronize data from HomeWizard to EnergyID
A tool to synchronize data from HomeWizard to EnergyID - Th3S4mur41/hw-hooks
020
Reposted by Michaël Vanderheyden
Brecht De Ruyte @utilitybend.com · 08/09/2026
🚀 Container style queries are baseline; New attr() capabilities are nearly there. Neat apart, but together they change how we can wire up components. Practice will make perfect, and I still need to rewire my brain for this combo. So, time to start that rewire. utilitybend.com/blog/contain...
utilitybend.com
Container style queries and advanced attr(): rethinking how to wire up my components in CSS | utilitybend
Wiring HTML attributes into CSS with advanced typed attr(), and letting container style queries pass that state down to child components.
23314
Reposted by Michaël Vanderheyden
Dave Rupert @davatron5000.bsky.social · 03/09/2026
I am once again asking for your vote for Interop 2027 github.com/web-platform...
github.com
Reference Target for Cross-Root ARIA · Issue #1333 · web-platform-tests/interop
Description After recieving 82 👍 12 ❤️ and 9 🚀 emojis from last year's interop proposal (#1011), I'm once again asking for Reference Target to be considered for Interop 2027. It solves (and doesn't...
391
Michaël Vanderheyden @th3s4mur41.me · 04/09/2026
Interop 2027 is open! You don’t need to be a standards expert to help shape the future of browsers. Just vote for the things you want to see improved. The list is already filling up with suggestions. Go boost the ones you care about and make your voice count. github.com/web-platform...
github.com
Issues · web-platform-tests/interop
web-platform-tests Interop project. Contribute to web-platform-tests/interop development by creating an account on GitHub.
084
Reposted by Michaël Vanderheyden
Luke @lukewarlow.dev · 03/09/2026
Why is it not the law that if I click a link in your app it just opens in my damn browser. Never has an in-app browser done anything useful.
3222
Reposted by Michaël Vanderheyden
Patrick Brosset @patrickbrosset.com · 03/09/2026
📢 Calling for Interop 2027 proposals. If you’ve encountered web features that behave differently across browsers, or standards-based capabilities that are difficult to rely on today, we want to hear from you.
blogs.windows.com
Calling for Interop 2027 proposals
The Interop 2027 call for proposals is open, submit your ideas now! Over the past six years, the I
1129
Reposted by Michaël Vanderheyden
Chrome for Developers @developer.chrome.com · 03/09/2026
Interop 2027 proposals are officially open → goo.gle/4xh1tEY Which web platform features need better cross-browser compatibility next year? Submit your ideas before September 23rd. Also be sure to like and comment on submitted ideas.
2026 dashboard
0187
Michaël Vanderheyden @th3s4mur41.me · 03/09/2026
Great post on color contrast! Combining WCAG + APCA is the way to go. Still, always test your combos in a color blindness simulator. Math only gets you so far, and visual tests often reveal surprising fails for certain use cases!
110
Reposted by Michaël Vanderheyden
Master.dev (Formerly Frontend Masters) @frontendmasters.com · 02/09/2026
New Things You Should Know About HTML Here in Mid 2026 The foundational language of the web is getting plenty of love lately! While HTML moves a bit more slowly than its buddies, CSS and JavaScript, that tends to be a good thing. I'm not gonna do, like, in here. That's too basic for you. Tha
blog.master.dev
New Things You Should Know About HTML Here in Mid 2026
The foundational language of the web is getting plenty of love lately! While HTML moves a bit more slowly than its buddies, CSS and JavaScript, that tends to be a good thing. I’m not gonna do, like,…
02810
Reposted by Michaël Vanderheyden
Schalk Neethling @schalkneethling.com · 31/08/2026
Figure, video, figcaption, and accessibility | What makes a video element accessible is captions, descriptions, and a transcript. When those aren't available, what options remain for providing an accessible name for a video element? | schalkneethling.com/posts/figure...
schalkneethling.com
Figure, video, figcaption, and accessibility
What makes a video element accessible is captions, descriptions, and a transcript. When those are out of reach, what are the remaining options for giving a video element an accessible name?
154
Reposted by Michaël Vanderheyden
Bramus @bram.us · 27/08/2026
In CSS you can feature detect support for selectors, properties + values, and at-rules using `@supports`. But how do you feature detect a change to an underlying implementation, or two existing properties suddenly working together? Enter `named-feature()` … → brm.us/named-feature
brm.us
Feature Detecting “Undetectable” CSS Features with @supports named-feature()
In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two exist...
5408
Reposted by Michaël Vanderheyden
Jake Archibald @jakearchibald.com · 26/08/2026
📝 When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles. Here's how it works: jakearchibald.com/2026/css-cus...
jakearchibald.com
Controlling when CSS custom properties are computed
The default might not be what you expect, and it has a big impact on your styles.
98715
Reposted by Michaël Vanderheyden
Jake Archibald @jakearchibald.com · 25/08/2026
It's really weird that the response to JPEG XL shipping is "yesss fuck WebP!" Like, we've had AVIF for years, and it outperforms JPEG XL in almost all web use-cases.
261048
Reposted by Michaël Vanderheyden
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
What should happen with text-box-trim and margin-trim when it comes to negative values? Do negatives 'trim'?
4366
Reposted by Michaël Vanderheyden
Bramus @bram.us · 20/08/2026
Help me out: I’m looking for some examples of full-page skeleton screens and loading states that are out there. Care to share your favorite examples with me? (There are a lot of examples that have skeleton screens on a component level, but I’m having trouble finding proper full-page ones)
463
Reposted by Michaël Vanderheyden
Firefox for Web Developers @webdevs.firefox.com · 19/08/2026
CSS text-box is newly baseline, and it's solves a common text layout issue. Here's how it works:
1234858
Reposted by Michaël Vanderheyden
Bramus @bram.us · 18/08/2026
Syntax aside, would you want layers that can win from unlayered styles as Dave describes here? Favorite this post to cast your vote. RT to reach more people.
3135
Michaël Vanderheyden @th3s4mur41.me · 18/08/2026
I'm with @bram.us on this one. Switching color mode shouldn’t feel like a guessing game. 3-state toggles (Light / Dark / System) win every time over 2-state toggles with hidden logic in my book. Clear UX always beats unpredictable behavior!
1161
Reposted by Michaël Vanderheyden
Kevin Powell @kevinpowell.co · 15/08/2026
The most undervalued front-end skill right now isn't prompting, it's being able to look at a broken layout and know what's causing it. youtu.be/2pJHWhmqlNU
youtu.be
The most undervalued front-end skill right now
YouTube video by Kevin Powell
6759
Reposted by Michaël Vanderheyden
Bruce Lawson @brucel.bsky.social · 12/08/2026
And my chums from the web platform team at Microsoft join Brave and Opera in supporting @vivaldi.com's DMA 6(7) request for Google to open WebAPK minting, so all Android browsers can install Progressive Web Apps as fully-fledged apps. issuetracker.google.com/issues/54304...
issuetracker.google.com
Google Issue Tracker
0285
Michaël Vanderheyden @th3s4mur41.me · 12/08/2026
I found a weird (specificity) bug in the current mixin implementation in Chrome/Edge. @patrickbrosset.com Applying the mixin before the generic selector doesn't work, but it does if the mixin is applied after codepen.io/editor/th3s4...
Two paragraphs of lorem ipsum on a grey background. The second paragraph has a dotted deep pink border.
110
Michaël Vanderheyden @th3s4mur41.me · 12/08/2026
Thanks to the friendly support at @codepen.io and quick bug fix, I can now work in CodePen v2 with my french keyboard ⌨️
110
Reposted by Michaël Vanderheyden
Kevin Powell @kevinpowell.co · 11/08/2026
Answers are a bit slow for this one. If you want to jog you memory on some, or even likely discover new ones, MDN has all the pseudo classes here, and there are a lot to pick from! developer.mozilla.org/en-US/docs/W...
developer.mozilla.org
Pseudo-classes - CSS | MDN
A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For ...
1164
Reposted by Michaël Vanderheyden
Web Standards @web-standards.dev · 10/08/2026
State of CSS 2026 survey results. Sacha Greif and Devographics polled 4,902 developers, and anchor positioning came out as the year’s favorite new feature, topping both the wish list and the browser support complaints. #css #survey 2026.stateofcss.com/...
“State of CSS 2026” logo with sections Features, Pain Points, Other Tools, CSS Usage, Resources, Demographics, Awards, Conclusion, and a chart: Grid 31%, Browser vendor issues 17%, Flexbox 16%.
033
Michaël Vanderheyden @th3s4mur41.me · 07/08/2026
Times where attribute selector were bad for performance are long gone... Use attributes directly in CSS instead of duplicating them in classes.
010
Michaël Vanderheyden @th3s4mur41.me · 07/08/2026
Remember when preprocessors were the only way to write modular CSS? Native CSS mixins are now being prototyped in Chromium! 🚀 I revisited my 2020 post on Sass/Less mixins to see what changes when reusable style blocks move straight into the browser. th3s4mur41.me/blog/mixins-...
th3s4mur41.me
Mixins: From Preprocessors to Native CSS
Native CSS mixins in Chromium: practical examples, runtime differences vs Sass/Less, flag-based testing, DevTools gaps, and where the draft spec goes further.
100
Reposted by Michaël Vanderheyden
Bramus @bram.us · 30/07/2026
In brm.us/styling-the-... I jotted down a quick intro to the concepts that we’ll be introducing: 1. Define Routes with @route 2. Query the navigation with @navigation 3. Select the navigation trigger with :nav-source 4. Advanced link selection with :link-to() (And url-pattern() woven throughout)
brm.us
Styling the Navigation: Declarative Route and Navigation Matching in CSS
One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been wor...
3201
Reposted by Michaël Vanderheyden
Bramus @bram.us · 04/08/2026
QQ about Dark Mode Toggles on websites How many options do you show to users? - Three values: System, Light, or Dark - Two values: Light, Dark (with one of them mapping to “System” behind the scenes). Why the one or the other? (I have an opinion about it, but I’m looking for external input)
44348
Michaël Vanderheyden @th3s4mur41.me · 25/07/2026
F is my personal favorite design for tve future Euro bank notes... What about you? www.ecb.europa.eu/euro/banknot...
ecb.europa.eu
Future banknotes
The European Central Bank (ECB) is the central bank of the European Union countries which have adopted the euro. Our main task is to maintain price stability in the euro area and so preserve the purch...
000
Michaël Vanderheyden @th3s4mur41.me · 25/07/2026
Keep learning, even on vacation 🏝️
000
Reposted by Michaël Vanderheyden
Jake Archibald @jakearchibald.com · 16/07/2026
Discovered that aria-describedby doesn't work on VoiceOver in Firefox or Safari unless the element with the attribute has a role like image/link/button or it's a form field. bugzilla.mozilla.org/show_bug.cgi... bugs.webkit.org/show_bug.cgi...
bugzilla.mozilla.org
2055267 - aria-describedby fails on VoiceOver except for particular roles
NEW (nobody) in Core - Disability Access APIs. Last updated 2026-07-16.
2191
Reposted by Michaël Vanderheyden
deconspray @deconspray.bsky.social · 15/07/2026
Accessibility progress starts with small wins. Fix one barrier today. Momentum follows. www.dennisdeacon.com... #Accessibility #DigitalAccessibility #A11y #InclusiveDesign #UXDesign #WCAG #AccessibilityTesting #UserExperience
dennisdeacon.com
Quick Wins That Move Accessibility Forward - Fast - Dennis Deacon
Quick accessibility wins that improve usability fast, from alt text to keyboard access, with practical fixes you can apply today.
132
Reposted by Michaël Vanderheyden
CSS by T. Afif @css-only.dev · 14/07/2026
📝 New CSS Article! The sibling-index() function lets you get the index of an element among its siblings, but it has a hidden superpower! Read my latest article to know about it 👇 master.dev/blog/in-n-ou...
master.dev
In-N-Out Animation using sibling-index()
Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!
1235
Reposted by Michaël Vanderheyden
Lea Verou, PhD @lea.verou.me · 13/07/2026
🔥 New blog post: In defense of polyfills A highly influential spec editor expressed the opinion that polyfilling is harmful. I beg to differ. lea.verou.me/blog/2026/po...
lea.verou.me
In defense of polyfills • Lea Verou
An influential spec editor thinks polyfilling is harmful. I think blaming polyfills for compat accidents is like blaming car crashes on the ambulances that show up — and the alternative is a stagnant ...
77024
Michaël Vanderheyden @th3s4mur41.me · 09/07/2026
My colleague Julia Undeutsch built "Div & Die": a game where players must guide a blind pedestrian across a street. Because the map uses only generic <div> tags, screen readers can't detect the tactile guidelines or white cane cues. A perfect look at why semantic code is vital!
Screenshot of 'Div & Die', a 2D game testing semantic HTML. The left side shows a top-down view of a pedestrian with a white cane attempting to cross a busy street via tactile paving. The right side shows the game's code panel filled entirely with non-semantic nested div tags instead of structural HTML landmarks. Text instructions warn that without semantic elements, a screen reader cannot intercept the environmental cues or landmarks needed to cross safely.
041
Michaël Vanderheyden @th3s4mur41.me · 08/07/2026
Adding proper arrow-key navigation to custom UI used to require tedious event handling. I’ve been experimenting with the new focusgroup API, and the simplicity is incredible. You get native, accessible UX out of the box while deleting custom JS. My first deep dive: th3s4mur41.me/blog/focusgr...
th3s4mur41.me
Focusgroup: The Future of Keyboard Navigation
Chrome and Edge 150 shipped native focusgroup support — an HTML attribute that brings arrow-key navigation to the browser, with automatic ARIA roles and a polyfill available today.
050
Reposted by Michaël Vanderheyden
Josh W. Comeau @joshwcomeau.com · 06/07/2026
Just published a blog post about the new CSS Anchor Positioning API! ⚓ I’ve been learning about it over the past few weeks, and it’s friggin’ great, but it also took me a minute to really get the hang of it. My goal in this post is to share the most useful bits, so you can start using it today. 🔥
joshwcomeau.com
Getting Started with Anchor Positioning • Josh W. Comeau
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a...
918032
Michaël Vanderheyden @th3s4mur41.me · 03/07/2026
Ready to crush the Aachener Firmenlauf! 🏃‍♂️ The energy at the starting line is amazing. Let’s see what these legs can do. If you’re here, give a wave! 👊
Portrait of myself on the starting line
010
Reposted by Michaël Vanderheyden
Josh Tumath @joshtumath.uk · 02/07/2026
Last month, I was speaking at @cssday.nl on the new <meta name=text-scale> tag. I've just published a blog post with my slides and summary. www.joshtumath.uk/posts/2026-0...
joshtumath.uk
Talk: Let's fix the web's text size - Josh Tumath
1237
Reposted by Michaël Vanderheyden
Manuel Matuzović @matuzo.at · 30/06/2026
This post is a follow-up on my previous post. I was wondering whether it's safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat. matuzo.at/blog/2026/gr...
matuzo.at
Progressively enhancing Grid Lanes
This post is a follow-up on my previous post. I was wondering whether it's safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat.
173
Reposted by Michaël Vanderheyden
Jake Archibald @jakearchibald.com · 29/06/2026
There's an ideal set of sizing constraints for custom <select>, but the CSS is a bit tricky. Here's how to make it work, and a tour of new CSS features along the way. jakearchibald.com/2026/goldilo...
jakearchibald.com
The Goldilocks customizable select height
The 'ideal' sizing is more complicated than you think…
1331055