Modern CSS Evolution: 3D Voxel Scenes, View Transitions, and Enhanced Selection Syntaxes

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

Daniel Schwarz details the release of Heerich.js, a lightweight engine for creating styleable 3D voxel scenes using SVG and CSS variables. This update highlights that the advanced ‘of selector’ syntax has officially reached Baseline support for modern browsers.

Why This Matters

The technical reality of modern CSS involves a complex, asynchronous rollout where features like container queries are shipped independently of their associated range syntax. While developers aim for an ideal model of uniform support, the current landscape requires navigating feature flags in Firefox 151 and missing support for the at-rule() function in Safari, highlighting the cost of fragmented browser implementation.

Key Insights

• Heerich.js renders 3D voxel scenes as SVG, enabling styling via CSS variables (David Aerne, 2026).
• The ‘of selector’ syntax is now Baseline supported, allowing developers to filter nth-child selections by any selector (Paweł Grzybek, 2026).
• View transitions can be used to animate focus transitions, providing a ‘flying focus’ effect (Chris Coyier, 2026).
• Range syntax comparison operators like ’>’ and ’<’ enhance readability for media and container queries (Ahmad Shadeed, 2026).
• Polypane launched a snippet store featuring tools like the ‘1-Click De-crapulator’ for cleaning HTML (Kilian Valkhof, 2026).

Working Examples

Selects the second element with the class .intro among siblings, provided it is a div.

div:nth-child(2 of .intro) {\n  /* ... */\n}

Uses CSS nesting with the ‘of’ syntax to select the second .intro within a parent .intro container.

.intro {\n  :nth-child(2 of &) {\n    /* ... */\n  }\n}

Practical Applications

• Use Case: Improving accessibility and focus visibility using view transitions for ‘flying focus’ animations. Pitfall: Disorienting users by failing to respect the prefers-reduced-motion media query.
• Use Case: Streamlining media queries with range syntax comparison operators for better code readability. Pitfall: Implementing range syntax for container style queries in Firefox without verifying the required feature flag status.

References:

• https://css-tricks.com/whats-important-11/