If you've been keeping an eye on the ever-evolving landscape of web development, you've probably noticed a flurry of exciting new tools and CSS capabilities. From building 3D voxel scenes that you can style with CSS to clever focus animations and powerful new selectors, the ecosystem is buzzing. This article dives into some of the most notable recent updates, including a tiny 3D engine, a handy snippet store, innovative focus techniques, and a game-changing CSS selector syntax.
Heerich.js: Stylable 3D Voxel Scenes
David Aerne, inspired by the sculptures of Erwin Heerich, created Heerich.js—a compact engine for generating 3D voxel scenes. The scenes are rendered as SVG, and because SVG supports CSS variables, you can style them directly with your existing stylesheets. This approach offers a unique blend of 3D geometry and familiar CSS customization, making voxel scenes easily adaptable to any design system.
Polypane's Snippet Store and the “1-Click De-crapulator”
Polypane, a browser tailored for web development, recently launched a snippet store. One standout feature is the “1-Click De-crapulator,” which lets you copy the essential HTML of a component—stripping away unnecessary clutter. It's a practical timesaver for developers who want clean, ready-to-use code snippets.
Animating Focus with View Transitions and CSS-Only Solutions
Chris Coyier explored how to animate focus using view transitions. He contrasted unnecessary motion with WebAIM's conditional prefers-reduced-motion approach, a responsible way to handle animations. In the comments, Kilian Valkhof (Polypane's founder) shared a pure CSS technique for a “floating focus” effect—also called “flying focus.” This method uses no JavaScript and provides a clean, accessible focus indicator.
The of <selector> Syntax: A Powerful CSS Addition
Paweł Grzybek recently reminded the community that the :nth-child(n of selector) syntax now enjoys solid browser support (Baseline). Many developers, including myself, had missed this feature. The syntax allows selecting the nth child that matches a specific selector, giving much finer control than :nth-of-type().
Example: Selecting the Second .intro That Is a <div>
The following rule selects the second element with class .intro that is also a <div>:
div:nth-child(2 of .intro) {
/* styles */
}This is more flexible than div:nth-of-type(2) because it can combine any selector, not just element types.
Using the of Selector with CSS Nesting
CSS nesting further enhances this feature. Paweł shared this example:
.intro {
:nth-child(2 of &) {
/* selects the second .intro inside .intro */
}
}Here, & represents the parent selector (.intro), so the rule targets the second .intro child within any .intro element. Modern CSS continues to surprise with its expressiveness.
Interestingly, Preethi Sam published a detailed article on this syntax just over a week ago—a must-read if you want to master the of selector.
Other Notable Updates: Scroll-Driven Animations and Browser Releases
Beyond these highlights, the web platform keeps advancing. Scroll-driven animations are gaining traction, allowing developers to tie animations directly to scroll positions without JavaScript. Meanwhile, Chrome 148 and Safari 26.5 have introduced a range of stability and performance improvements, along with new CSS and JavaScript features. Keep an eye on their release notes for the full details.
Whether you're a frontend enthusiast or a seasoned developer, these tools and techniques offer fresh ways to build engaging, accessible websites. Dive into the links above for deeper exploration, and happy coding!