H ere are a few of my least favorite, easy to forget, unintuitive CSS layout 'solutions': min-height: 0; flex-shrink: 0; repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); Height 0? Shrink 0? Wat?

Until recently I had taken only the most cursory look at View Transitions. Now they are in Safari too, and therefore viable across multiple platforms, I wanted to understand them a little more and start making use of them in production. I imagine I am where most working front-end devs are at this point; aware of View Transitions, but I, and no-one I knew personally, was using them day to day.

I’ve given it some thought and I’m going to say it. I don’t like pseudo-elements. At least not where they’re going. Talk of Google’s carousel kerfuffle was rightly focused on accessibility (or lack thereof). However, the spec behind the carousel makes ample use of new pseudo-elements, and I don’t like that either.

The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines (WCAG 2.2).

If we can get the mouse position in CSS so easily, what else can we build with that? I started tinkering, trying out different interaction patterns, and eventually got to this Spotlight Effect that’s easy to create, simple to customize, and looks surprisingly slick, all with just a few lines of CSS.