Just watched Adam Argyle’s CSS Day talk on Contextualism. Excellent as usual.

Adam shared a mega list of things a component could and should respond to. He was so mad that most of our components (including his own) do almost none of it.

Slides

Today I learned, through Sara Soueidan’s course, Practical Accessibility, that spectacles/eyeglasses are a form of assistive technology.

I’ve worn glasses for most of my life, but I’ve never really thought of myself as someone who uses assistive technology.

It made me realize how easily we can think of assistive technology as something that exists for “people with disabilities,” rather than something many of us may rely on ourselves.

Niklas Gruhn, on relaying AI output verbatim:

By all means, prompt AI. But don’t just relay the output. Read it, understand it, validate it, and then write a response in your own words (a decent certificate that you’ve done the prior steps). Making that effort is value you can add.

This reminds me of Simon Willison’s rule, I will not publish anything that takes someone else longer to read than it took me to write.

Among friends I’ll sometimes skip the rewrite and share a link with the prompt in it instead. As Dave Rupert mentioned, he wants the prompt because it shows the context you gave the machine and your understanding of the problem: I’d rather have the original prompt so I can just ask the machine myself. It’s the least bad way to relay, not an alternative to doing the work.

At work, if your job is to move a bunch of heavy things from one side of the room to another, you should use whatever assistive tech you have on hand: a wagon, a forklift… even an AI-powered robot. But at the gym, it makes no sense for that robot to lift weights for you. The point of weightlifting isn’t to move heavy things across the room; it’s to actually lift those heavy things.

The same analysis holds for any task an AI can do for you. If it’s work—if the task has to be done and no one cares how—then it’s fine to use AI assistance. But if the task is more like the gym, and howthe task is done is at least as important, then it probably doesn’t make sense to use AI.

Today I learned, that copying and pasting other people’s code in your project is called vendoring. Carson Gross goes on to explain how vendoring can get pretty difficult to deal with and how that is actually its strength:

Because dealing with large numbers of dependencies is difficult, vendoring encourages a culture of independence.

You get more of what you make easy, and if you make dependencies easy, you get more of them.

I’ve put hours into learning CSS over the years and continue to do so happily. Building things with HTML and CSS is the part of the work I enjoy the most.

But it always felt like there were gaps in my knowledge. So I just enrolled in Poetic CSS to finally understand it from the inside out.

I think the way we currently write CSS subtly shapes the way we think about components. By having the visual styles completely decoupled from the semantic meaning, accessibility is easy to forget, because we can’t physically see missing attributes. When the styling hook is anchored to semantics, you can’t get the visual styles without also getting the parts that make it accessible.

Tom Bedor, on forwarding AI output to a colleague:

If you are requesting human attention, demonstrate human effort.

This reminded me of a line from Don’t ask to ask, if you’re not willing to do the work to solve your problem, why should we?

Today I learned via Paweł Grzybek’s post on Mastodon, where Temani Afif pointed out that text decorations propagate to their descendants, they aren’t inherited.

The difference between propagation and inheritance is that the descendants don’t get their own text-decoration property. So, the line, color, style and thickness are all determined by the ancestor where text-decoration was declared.

A descendant can still declare its own text-decoration, but that creates an additional decoration on top, it doesn’t modify or remove the ancestor’s.

Today I learned, adding tabindex="-1" to skip link targets is likely no longer necessary in modern browsers.

Manuel Matuzović tested skip links without tabindex="-1" on targets across major browsers and screen readers on macOS, Windows and Android, concluding it is safe to remove in most setups, thanks to sequential focus navigation starting point.

Furthermore, adding tabindex="-1" to skip link targets also introduces a regression in usability. With tabindex="-1" on main, clicking on any non-interactive area inside main makes main itself the focus starting point. So, the next tab press sends focus to the first focusable element in main, not the next one after where the user clicked. The gov.uk team removed tabindex from main for this reason.

Turns out, if you have a website and you think of the browser as a way to navigate documents — rather than a runtime to execute arbitrary code and fetch, compile, and present them — things can be a lot simpler than our tools often prime us to make them.

You can’t write a compelling narrative about the thing you didn’t build. Nobody gets promoted for the complexity they avoided.

Complexity looks smart. Not because it is, but because our systems are set up to reward it.

Today, while working through an exercise in Eloquent JavaScript, I learned about the concept of parity in maths.

The parity of an integer is its attribute of being even or odd. Thus, it can be said that 6 and 14 have the same parity (since both are even), whereas 7 and 12 have opposite parity (since 7 is odd and 12 is even).

– Weisstein, Eric W, Parity

Initially, I had assumed “same parity” meant “same value”, which is roughly what it means in English. However, in maths it’s narrower. It just means both numbers are even or both are odd.

Your AI coding agent, the one you use to write code, needs to reduce your maintenance costs. Not by a little bit, either. You write code twice as quick now? Better hope you’ve halved your maintenance costs. Three times as productive? One third the maintenance costs. Otherwise, you’re screwed. You’re trading a temporary speed boost for permanent indenture.

[…] The math only works if the LLM decreases your maintenance costs, and by exactly the inverse of the rate it adds code. If you double your output and your cost of maintaining that output, two times two means you’ve quadrupled your maintenance costs. If you double your output and hold your maintenance costs steady, two times one means you’ve still doubled your maintenance costs.

A developer who builds accessible interfaces is more skilled. Say this out loud. Repeat it often. A developer who creates accessible interfaces isn’t doing extra work; they’re doing the work the right way.

No matter how rapidly technology changes, I am coalescing around some core beliefs:

1. Things that are worth doing are worth doing well.
2. Things that are done well require time and effort.
3. You make meaning through the doing.
4. Ideas are common; effort is not.
5. There are no shortcuts.

I just read Dave Rupert’s post on Inverted themes with light-dark(). It’s great.

I wish light-dark() accepted any value and not just colors. I have a use case where I use lighter font weights in dark mode.

Bramus wrote about a custom --light-dark() function using @function, if() and color-scheme() that would solve this in the future.

Just watched the latest Whiskey Web and Whatnot episode with Chris Coyier and Dave Rupert. No one would’ve guessed that I was watching a web dev podcast from how much I was laughing.

At one point in the episode Adam mentions, “holy crap, my job is now leftover tokens in a burn window”. If Adam can feel like AI is making his work redundant then what hope do I have? 🙈

Harry Roberts on what CSS containment actually is, what each contain value does, and how to use it confidently on real projects without creating hard-to-debug side effects.

Last week, I built a visual explainer of the CSS Cascade.

I used anchor positioning with chained anchors to stack the cascade steps. It worked, but Safari 26.4 and earlier had a bug with chained anchors, so I had to exclude Safari entirely via an @supports hack.

I wasn’t entirely happy with that, so I refactored the layout to use a subgrid based approach with grid-template-areas. Since subgrid became Baseline Widely Available recently, the timing also worked out.

While I was at it, I also restructured the HTML such that each cascade step is now a list item inside an ordered list, which gives better semantics.