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

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 — create 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.

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 list*).

Understanding the range syntax

The range syntax is a new(ish), more readable syntax with comparison operators (>, <, >=, and <=) for media queries and container queries. Ahmad Shadeed expertly explained how the range syntax works, but keep a close eye on browser support. Web browsers are still shipping container queries and the range syntax for those queries has to be shipped independently. For example, container style queries are shipping in Firefox 151 next week, but the range syntax for container style queries will ship with a flag.

It’s an easy thing to miss (don’t ask me how I know).

Understanding scroll-driven animations

Scroll-driven animations can be kinda tough (especially those with view() timelines), but Josh Comeau’s expert explanation of scroll-driven animations makes them so much easier to understand. With scroll-triggered animations on the way, I highly recommend mastering scroll-driven animations first (if you haven’t already). Again, don’t ask me how I know (*cries in CSS*).

New web platform updates

• Chrome 148
  • Name-only container queries (now Baseline)
  • revert-rule keyword (no stable Safari support)
  • at-rule() function for feature queries (no Safari or Firefox support)
  • loading attribute for <video>/<audio> (no Safari or Firefox support)
• Safari 26.5
  • :open pseudo-class (now Baseline)
  • Updated random() function (no Chrome or Firefox support)

Inspired by this lovely comment, we’d just like to thank our authors for all of the incredible work that they do, as well as the many other educators out there that we undoubtably learn from and become inspired by. Keep on keeping on, CSS-Tricksters!

I'm not a CSS expert, but expert CSS educators are my favorite. Their design skills, ability to take full advantage of the web platform, AND general enthusiasm for building for the web is unmatched by other types of developers!

— George Rodier (@georgerodier.com) 15:42 · Apr 30, 2026

Until next time!

---

What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

from CSS-Tricks https://ift.tt/g5hOzy8
via IFTTT