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

If 3D voxel scenes (that you may model), flying focus animations, or new CSS syntaxes sound like your kinda factor, then this challenge of What’s !necessary is unquestionably for you.

Additionally that includes Polypane, scroll-driven animations, and the most recent internet platform updates from Chrome 148 and Safari 26.5.

Heerich.js for 3D voxel scenes

Impressed 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 since we are able to use CSS variables in SVG, the scenes are mainly styleable utilizing CSS.

A clean, minimal isometric visualization of a large 3D grid with a small black cube, accompanied by explanatory text about alignment logic and visual styles.

Polypane snippets

Polypane, extensively thought-about to be the perfect browser for internet growth, launched a snippet retailer. So, for those who wished to click on on a part and duplicate the fundamental HTML with out all the “bloaty crap”, the 1-Click on De-crapulator is what you’d need. Incredible identify, by the way in which.

Animating focus with view transitions

Chris Coyier confirmed us learn how to animate focus with view transitions. He additionally contrasted “pointless movement” with WebAIM’s conditional prefers-reduced-motion implementation, which I believe is the appropriate strategy, as a result of I discover it tough to maintain monitor of focus even when it’s actually seen.

CodePen Embed Fallback

Both manner, it’s a implausible exploration of methods. As well as, manner down within the feedback, Kilian Valkhof (founding father of Polypane, truly) shared his CSS-only approach for floating focus (or, as Chris calls it, “flying focus”).

The `of` syntax

Paweł Grzybek talked about that the of syntax is definitely nicely supported (Baseline) now, however actually, I hadn’t even heard of it.

I knew that the CSS :nth-child(n of selector) is a factor, however I didn’t understand how nicely supported it’s these days. One other factor I didn’t know is that I can use CSS nesting with it like within the instance under. Fashionable CSS is unimaginable ❣️

developer.mozilla.org/en-US/docs/W…

#css

[image or embed]

— Paweł Grzybek (@pawelgrzybek.com) 17:51 · Could 5, 2026

The next selector means, “from all siblings, choose the second .intro, however provided that it’s a


.” It’s form of like div:nth-of-type(2), besides that can solely choose components of the identical sort, whereas of  works with any selector.
div:nth-child(2 of .intro) {
  /* ... */
}
Provided that & is equal to the mother or father selector (so, .intro), the second instance means “from all siblings, choose the second .intro inside .intro. Additionally, as a result of there isn’t something earlier than :nth-child(), .intro could be something this time round.
.intro {
  :nth-child(2 of &) {
    /* ... */
  }
}
There’s a lot occurring with CSS proper now, so I discover it actually helpful when one thing I’ve missed comes again round like this. Although funnily sufficient, as I’m typing this, I’m seeing that Preethi Sam wrote an article on the of  syntax a bit over every week in the past (*provides to studying checklist*).
Understanding the vary syntax
The vary syntax is a brand new(ish), extra readable syntax with comparability operators (>, <, >=, and <=) for media queries and container queries. Ahmad Shadeed expertly defined how the vary syntax works, however preserve a detailed eye on browser help. Net browsers are nonetheless transport container queries and the vary syntax for these queries must be shipped independently. For instance, container model queries are transport in Firefox 151 subsequent week, however the vary syntax for container model queries will ship with a flag.
It’s a simple factor to overlook (don’t ask me how I do know).
Scroll-driven animations could be kinda robust (particularly these with view() timelines), however Josh Comeau’s knowledgeable rationalization of scroll-driven animations makes them a lot simpler to know. With scroll-triggered animations on the way in which, I extremely suggest mastering scroll-driven animations first (for those who haven’t already). Once more, don’t ask me how I do know (*cries in CSS*).
New internet platform updates
Impressed by this pretty remark, we’d similar to to thank our authors for all the unimaginable work that they do, in addition to the numerous different educators on the market that we undoubtably be taught from and develop into impressed by. Carry on holding on, CSS-Tricksters!

I am not a CSS knowledgeable, however knowledgeable CSS educators are my favourite. Their design expertise, skill to take full benefit of the online platform, AND normal enthusiasm for constructing for the online is unmatched by different kinds of builders!
— George Rodier (@georgerodier.com) 15:42 · Apr 30, 2026
Till subsequent time!