今日已更新 264 条资讯 | 累计 23847 条内容
关于我们

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

Daniel Schwarz 2026年05月15日 21:16 3 次阅读 来源:CSS-Tricks

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

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 for 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. CodePen Embed Fallback 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 syntax Paweł Grzybek mentioned that the of 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
本文内容来源于互联网,版权归原作者所有
查看原文