CSS-Tricks Round-Up: Refraction Effects, Scroll State & More
Explore the latest front-end updates in CSS-Tricks #19, featuring background image refraction, scroll-state queries, and @custom-media tips.
Stock photo for illustration only, not from the actual event
- Preethi Sam demonstrates CSS-only background image refraction effects without JavaScript
- Dan Holloran explains how to utilize various scroll-state() queries like scrolled and stuck
- Bramus showcases CSS grid animations powered by anchor positioning features
- CSS-Tricks announces the return of its bi-weekly newsletter starting November 10th
The front-end community has plenty to explore with the 19th edition of What’s !important from CSS-Tricks, which compiles cutting-edge techniques, tools, and web platform updates. This roundup highlights innovative approaches to modern CSS and HTML features shared by industry experts.
Kicking off the technical highlights, Preethi Sam demonstrated how to build stunning background image refraction effects using minimal CSS. The technique is fully animatable, requires zero JavaScript, and eliminates the need to duplicate image assets. Following that, Brecht De Ruyter showcased customizable component building using container style queries and advanced attr() functions, complete with interactive demos.
Stock photo for illustration only, not from the actual event
Dan Holloran walked developers through different scroll-state() queries including scrollable, scrolled, snapped, and stuck. The feature is concise and approachable, perfectly encapsulated by snippets like @container scroll-state(stuck: top) { /* ... */ }. Meanwhile, Declan Chidlow looked back at some of the wildest legacy CSS ever written, primarily originating from Internet Explorer eras, such as -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";.
Regular roundups of front-end techniques highlight how rapidly web standards are evolving to solve long-standing layout challenges. Features like anchor positioning and container queries reduce reliance on heavy JavaScript libraries, empowering developers to build native, high-performance interfaces directly through the browser platform.
Bramus also demonstrated how to animate CSS grids using anchor positioning by binding content to corresponding cells so that reflow animations follow the content smoothly, though Firefox support is currently hindered by a rendering bug. Additionally, Victor Ayomipo examined why container query adoption has lagged behind developers' wishlists, arguing that a shift in perspective is needed to utilize them effectively.
"Today in CSS: We all know you can change the highlight colour of selected text, but it's impossible to animate that colour. Unless… the colour was just a variable inherited from the parent element, using @property to make it animatable… Hahahahaha…"
Leon Arnott
Another clever trick came from Leon Arnott, who bypassed the traditional restriction against animating ::selection background colors by leveraging inherited CSS variables via @property. On the usability front, Andy Bell reminded developers that adding touch-action: manipulation to a stylesheet easily prevents accidental double-tap-to-zoom behaviors on mobile devices.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment