What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More

Preethi Sam showcased how to achieve stunning background image refraction effects using only CSS, requiring minimal styling and avoiding image duplication or JavaScript involvement.

Brecht De Ruyte illustrated building highly customizable components by leveraging container style queries alongside advanced use of `attr()`, presenting several impressive interactive demonstrations.

Dan Holloran walked through utilizing the various `scroll-state()` queries, covering states such as `scrollable`, `scrolled`, `snapped`, and `stuck`, providing a concise snippet like `@container scroll-state(stuck: top) { /* ... */ }`.

Bramus demonstrated animating CSS grids through anchor positioning, a technique where content, rather than the cell, animates as the grid reflows; however, this currently exhibits issues in Firefox.

Victor Ayomipo addressed the lackluster adoption of container queries, arguing that misuse is the primary hurdle, thus setting the record straight on their proper application.

Cory LaViska showed how to employ `@custom-media` in conjunction with container style queries to provide effective fallbacks, complementing Declan's detailed Almanac dive on this topic.

Patrick Brosset detailed the proposed `previewsrc` HTML attribute, which would allow supplying preview images for resources before they fully load, such as a blurry version.

Temani Afif shared a custom borders demo, achieved by declaring a transparent border, defining its shape with `border-shape`, and then using `background-clip: border-area` with a background.

Leon Arnott revealed a trick for animating the background color of `::selection`, which is typically thought impossible, by inheriting the color via a variable and using `@property`.

Andy Bell pointed out that the `touch-action: manipulation` property can effectively disable the double-tap-to-zoom-in functionality on touch targets.