What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More

news What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More Daniel Schwarz on May 15, 2026 If 3D voxel scenes (that you can style), flying focus animations, or new CSS syntaxes sound like your kinda thing, then this issue of What’s !important is definitely for you. Also featuring Polypane, scroll-driven animations, and the latest web platform updates from Chrome 148 and Safari 26.5. Heerich.js for 3D voxel scenes Inspired by the sculptures of Erwin Heerich , David Aerne created Heerich.js , a tiny engine for creating 3D voxel scenes. They’re rendered as SVG, and because we can use CSS variables in SVG, the scenes are basically styleable using CSS. Polypane snippets 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. Animating focus with view transitions 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. CodePen Embed Fallback 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> .” It’s kind of like div:nth-of-type(2) , except that can only select elements of the same type, whereas of <selector> works with any selector. div:nth-child(2 of .intro) { /* ... */ } Given that & is equivalent to the parent selector (so, .intro ), the second example means “from all siblings, select the second .intro within .intro . Also, because there isn’t anything before :nth-child() , .intro can be anything this time around. .intro { :nth-child(2 of &) { /* ... */ } } There’s so much happening with CSS right now, so I find it really useful when something I’ve missed comes back around like this. Though funnily enough, as I’m typing this, I’m seeing that Preethi Sam wrote an article on the of <selector> syntax a bit over a week ago ( *adds to reading