If 3D voxel scenes (that you may type), flying focus animations, or new CSS syntaxes sound like your kinda factor, then this subject 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 will use CSS variables in SVG, the scenes are mainly styleable utilizing CSS.
Polypane snippets
Polypane, extensively thought of to be the most effective browser for internet improvement, launched a snippet retailer. So, should you needed to click on on a element and duplicate the fundamental HTML with out the entire “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 find out how to animate focus with view transitions. He additionally contrasted “pointless movement” with WebAIM’s conditional prefers-reduced-motion implementation, which I feel is the proper strategy, as a result of I discover it tough to maintain monitor of focus even when it’s actually seen.
Both method, it’s a incredible exploration of methods. As well as, method 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 properly supported (Baseline) now, however truthfully, 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 properly 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. Trendy CSS is unbelievable ❣️
developer.mozilla.org/en-US/docs/W…
#css
— Paweł Grzybek (@pawelgrzybek.com) 17:51 · Might 5, 2026
The next selector means, “from all siblings, choose the second .intro, however provided that it’s a
div:nth-of-type(2), besides that can solely choose parts of the identical kind, whereas of works with any selector.
div:nth-child(2 of .intro) {
/* ... */
}On condition that & is equal to the guardian 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 will 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 maintain a detailed eye on browser assist. Net browsers are nonetheless delivery container queries and the vary syntax for these queries must be shipped independently. For instance, container type queries are delivery in Firefox 151 subsequent week, however the vary syntax for container type queries will ship with a flag.
It’s a simple factor to overlook (don’t ask me how I do know).
Scroll-driven animations will be kinda robust (particularly these with view() timelines), however Josh Comeau’s knowledgeable rationalization of scroll-driven animations makes them a lot simpler to grasp. With scroll-triggered animations on the way in which, I extremely advocate mastering scroll-driven animations first (should you 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 the entire unbelievable work that they do, in addition to the various different educators on the market that we undoubtably be taught from and develop into impressed by. Carry on preserving on, CSS-Tricksters!
I am not a CSS knowledgeable, however knowledgeable CSS educators are my favourite. Their design expertise, capability to take full benefit of the online platform, AND normal enthusiasm for constructing for the online is unmatched by different varieties of builders!
— George Rodier (@georgerodier.com) 15:42 · Apr 30, 2026
Till subsequent time!
