3D voxel scenes can be created with Heerich.js, a tiny engine that renders voxel scenes as SVG and allows styling through CSS variables. Polypane introduced a snippet store with a one-click de-crapulator that copies clean HTML for selected components. Focus can be animated using view transitions, while unnecessary motion can be avoided through conditional prefers-reduced-motion behavior. A CSS-only technique enables floating focus, also called flying focus. The of <selector> syntax is now well supported, and CSS nesting can be used with it. The selector behavior targets specific siblings based on conditions such as element type and position.
"They're rendered as SVG, and because we can use CSS variables in SVG, the scenes are basically styleable using CSS. Polypane, widely considered to be the best browser for web development, launched a snippet store. So, if you wanted to click on a component and copy the basic HTML without all of the bloaty crap, the 1-Click De-crapulator is what you'd want. Fantastic name, by the way."
"Chris Coyier showed us how to animate focus with view transitions. He also contrasted "unnecessary motion" with WebAIM's conditional prefers-reduced-motion implementation, which I think is the right approach, because I find it difficult to keep track of focus even when it's really visible. Either way, it's a fantastic exploration of techniques."
"In addition, way down in the comments, Kilian Valkhof (founder of Polypane, actually) shared his CSS-only technique for floating focus (or, as Chris calls it, "flying focus"). The of <selector> syntax Paweł Grzybek mentioned that the of <selector> syntax is actually well supported (Baseline) now, but honestly, I hadn't even heard of it."
"I knew that the CSS :nth-child(n of selector) is a thing, but I didn't know how well supported it is nowadays. Another thing I didn't know is that I can use CSS nesting with it like in the example below. Modern CSS is incredible ❣️ developer.mozilla.org/en-US/docs/W... #css[image or embed]- Paweł Grzybek ( @pawelgrzybek.com) 17:51 · May 5, 2026 The following selector means, "from all siblings, select the second .intro, but only if it's a <div>""
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]