Lightnews — Scholar-powered news

Reposted by Michaël Vanderheyden

CSS by T. Afif @css-only.dev · 9h

📝 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. 👇

CSS-Tricks* @css-tricks.bsky.social · 9h

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...

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

3 5

Michaël Vanderheyden @th3s4mur41.me · 9h

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

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

2 7

Reposted by Michaël Vanderheyden

firefoxdevtools.bsky.social @firefoxdevtools.bsky.social · 6d

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

Interop Feature Ranking

Rank the web platform features you care most about

interop-rank.jakearchibald.com

17 110 230

Reposted by Michaël Vanderheyden

Piccalilli @piccalil.li · 8d

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...

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

7 26

Michaël Vanderheyden @th3s4mur41.me · 13d

I'm just starting out, but already have some plans for future posts. Mostly html css and accessibility focused 🤭
Still quite some work to do on the website too...
th3s4mur41.me

Home | Th3S4mur41.me

Personal site of Th3S4mur41: developer & martial artist sharing web development, accessibility, performance, CSS, JS, UI/UX and open source insights.

th3s4mur41.me

Michaël Vanderheyden @th3s4mur41.me · 15d

🎧 Listen here:
Spotify: open.spotify.com/episode/29oP...
Apple: podcasts.apple.com/in/podcast/s...
YouTube: www.youtube.com/watch?v=h9I7...
Amazon: music.amazon.com/podcasts/17d...

This link will take you to a page that’s not on LinkedIn

lnkd.in

1

Michaël Vanderheyden @th3s4mur41.me · 15d

“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

1

Michaël Vanderheyden @th3s4mur41.me · 20d

Even more fun to use in combination with corner-shape 😁

1 2

Michaël Vanderheyden @th3s4mur41.me · 23d

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

Michael running in a group of people during the Aachener Firmenlauf 2025 wearing an Atos T-shirt

Reposted by Michaël Vanderheyden

Una Kravets @una.im · 28d

Upvote this feature for Interop 2026: github.com/web-platform...

2 15 54

Michaël Vanderheyden @th3s4mur41.me · 27d

Super useful. Had to rely a custom components a lot for this.
Started using it already both as progressive enhancement or in the custom component depending on use cases.
Can't wait to see full support for the multi-select version too

Michaël Vanderheyden @th3s4mur41.me · 28d

Only downside is I still need a hard breakpoint to switch.
I'd rather have that happen dynamically when nav doesn't fit horizontally, but that is not possible, at least not without Javascript.

1

Michaël Vanderheyden @th3s4mur41.me · 28d

I've done one recently (not published yet) with a single nav and popover.
No Javascript at all. Just hide the button and force display the nav/popover content on large screens.
Seems to work well with assistive tech as well.

1 1

Reposted by Michaël Vanderheyden

Kevin Powell @kevinpowell.co · Sep 12

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

Navigating the World of Web Accessibility with Sara Soueidan

YouTube video by General Musings with Kevin Powell

youtu.be

1 9 40

Michaël Vanderheyden @th3s4mur41.me · Sep 11

Too bad 😞

1

Michaël Vanderheyden @th3s4mur41.me · Sep 11

Yes, thanks for pointing in the right direction 😊
Since the draft spec does not include this yet, I guess it's too early to propose this for #Interop2026, right?

1

Michaël Vanderheyden @th3s4mur41.me · Sep 11

@una.im @bram.us @jensimmons.bsky.social @oddbird.dev @tabatkins.com @jakearchibald.com @rachelandrew.bsky.social @lea.verou.me

I'd love to hear your thoughts on this one? 😉

2

Michaël Vanderheyden @th3s4mur41.me · Sep 11

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

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

1 1

Michaël Vanderheyden @th3s4mur41.me · Sep 8

Issue was reproducible and has been moved over to bugzilla.mozilla.org/show_bug.cgi...

1987354 - codepen.io - Text element is overlapping the SVG object

NEW (nobody) in Web Compatibility - Site Reports. Last updated 2025-09-08.

bugzilla.mozilla.org

Michaël Vanderheyden @th3s4mur41.me · Sep 8

#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

web-platform-tests/interop

web-platform-tests Interop project. Contribute to web-platform-tests/interop development by creating an account on GitHub.

github.com

Michaël Vanderheyden @th3s4mur41.me · Sep 8

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...

On the left (Chromium), the SVGs are placed on top of the text within the subgrid as expected. On the Right (Firefox), the SVGs are overflowing out of the grid and behind the text

2

Michaël Vanderheyden @th3s4mur41.me · Sep 4

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

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

1

Reposted by Michaël Vanderheyden

James Stuckey Weber @jamessw.com · Sep 3

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 .

Create Performant Layouts and Resilient Dropdowns

This CSS anchor positioning course teaches you how

oddbird.dev

4 5

Michaël Vanderheyden @th3s4mur41.me · Sep 2

Oh yeah, and ESR for testing of course 😊

2

Michaël Vanderheyden @th3s4mur41.me · Sep 2

Mostly for the experimental DevTools features.
I usually stick to the Dev editions of my browsers for the day-to-day use and switch to nightly/canary for the cutting edge experiments.

1 2