Lead UX Engineer & Accessibility Specialist @ cycos, an Atos Business
#CPWA #WebDev #A11y #CSS
Martial arts lover | Shotokan Karate black belt | BJJ practitioner | Bikejöring
https://th3s4mur41.me
Is your "Back to Top" link breaking your UX? href="#" might be valid HTML, but it creates a major accessibility focus desync—scrolling the screen for sighted users while trapping keyboard focus at the bottom.
Read why your linter is right to hate it:
th3s4mur41.me/blog/href-ha...
Interested in setting aside the magical prompter and learning some web standards skills the old fashioned way? You can sign up for my online Web Components course for free until Oct 31 with the code markitzero. If you find it useful, please consider letting folks know! 🎃
CSS-Tricks has a new owner!
Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that.
https://css-tricks.com/css-tricks-has-a-new-owner/
I wish I'd realized when recording this that it would come out on the 10-year anniversary of my channel, but even if I didn't mention it, I guess it's still pretty fitting 😅
(plus it was posted to my second channel anyway, lol)
Back in 2014, I decried CSS variables, but my perspective has largely changed. Here’s what I missed, how I use them now, and why fallbacks still matter. www.aaron-gustafson.com/notebook/i-c...
Tomorrow, October 16th, marks Practical Accessibility's third birthday. 🎂
To celebrate, I am gifting everybody 25% off for the next 48 hours 🎁 Individual and team licenses alike!
The discount is automatically applied during checkout—no code is needed.
👉🏻 practical-accessibility.today
Enjoy! #a11y
What do you want us to work on in 2027?
Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development.
interop-rank.fxdx.dev
What do you want the new default styling to be for HTML fieldset? Here’s what it’s been forever — a box around things, with the legend text placed over the middle of the line at the top left. (See developer.mozilla.org/en-US/docs/W... for more.)
Link Parameters is the thing that gives you the ability to style embedded external SVGs.
Something many have wanted to do for a long time!
If you want to show your support of this, give these 2 issues a thumbs-up and comment:
💬 github.com/web-platform...
💬 github.com/web-platform...
I’ve been banging the drum about *not* using ARIA menu roles for site navigation for nearly a decade.
I’ve just updated my 2017 post with what has become my general point-by-point refutation when I see them proposed:
adrianroselli.com/2017/10/dont...#HTML#accessibility#a11y#ARIA
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.
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...
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
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!
Friends, it's that time of the year: Once again, I'm asking you to help me create another amazing HTMHell Advent Calendar by writing about HTML.
The CFP is open until October 3!
docs.google.com/forms/d/e/1F...
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...
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...
🎨 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
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.
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...
🚀 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...
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...
📢 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.
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.
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!
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
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...
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
📝 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...
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.
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)
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.
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!
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
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-...
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...
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...
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...
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#survey2026.stateofcss.com/...
Don't use a class for that! Developers love classes, but HTML already has many attributes that can be used to identify and select elements, why not take advantage of them and get some extra benefits too?
alvaromontoro.com/blog/68107/d...#html#css#webdev
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)
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)