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

We’re back! Don't worry, this isn’t a trick (despite what our name suggests!). However, due to the hiatus, we're also a little behind. That’s why this issue of What’s !important is absolutely stacked. All killer, no filler. Here's what you missed. What’s !important 19: CSS Refraction Effects, Scroll State Queries,…

Daniel SchwarzOctober 27, 2026 5 min readOriginal

We’re back! Don’t worry, this isn’t a trick (despite what our name suggests!). However, due to the hiatus, we’re also a little behind. That’s why this issue of What’s !important is absolutely stacked. All killer, no filler. Here’s what you missed.

Note: After four years, the CSS-Tricks newsletter is also returning! And these handy-dandy roundups will be moving there starting November 10th. More information on that soon, but for now, be sure to subscribe to get the latest front-end goodness and web platform updates in your inbox every two weeks. Or, maybe you’d like to sponsor it?

By the way, before we dive in, Mat Marquis’ highly recommended JavaScript for Everyone course is currently -30% off (code:

). You don’t want to miss this.

CSSTRICKSFRIENDS

How to create background image refraction effects

Preethi Sam demonstrated how to create background image refraction effects with CSS. The effects are stunning, can be animated, don’t need very much CSS (no JavaScript), and we don’t need to duplicate the image either.

How to build components using style queries and `attr()`

Brecht De Ruyte demonstrated how to build customizable components using container style queries and advanced attr(), showcasing some incredible interactive demos, including the two below:

How to use the different `scroll-state()` queries

Dan Holloran showed us how to use the different scroll-state() queries (

scrollable

scrolled

snapped

, and

stuck

). It’s not a long read, which is exactly what you want for a new but simple feature like this.

A quick, no-context CSS snippet to entice you:

@container scroll-state(stuck: top) {
  /* ... */
}

The craziest CSS to ever exist

Declan Chidlow shared some of the craziest CSS to ever exist, and I mean craziest. Most of it comes from Internet Explorer, but let’s face it, you knew that already. Thankfully, they don’t build them like they used to.

Remember this one?

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

How to animate CSS grids using anchor positioning

Bramus demonstrated how to animate CSS grids using anchor positioning. The idea is that we anchor content to its corresponding cell, and then as the grid reflows, it’s the content (not the cell) that animates with it.

(But it doesn’t work in Firefox due to what sounds like a bug.)

New HTML features

Chris Coyier talked about a bunch of new HTML features, and honestly, there’s a whole lot in there that you definitely haven’t heard of. Like, I’m certain of it.

How to use container queries (the right way)

Victor Ayomipo contemplated why container query adoption has been so terrible despite them topping CSS wishlists for years. Victor thinks that we’re using them wrong, so he’s here to set the record straight.

How to use `@custom-media` (with a fallback)

Speaking of container queries…

Cory LaViska demonstrated how to use @custom-media in addition to container style queries as a fallback.

How to detect overlapping elements

Ahmad Shadeed tackled an interesting topic — detecting overlapping elements (with CSS, of course). If you’re keen on anchor positioning, scroll-driven animations, and again (!), container style queries, then this walkthrough is for you.

Maybe container queries are finally picking up?

Introducing the `previewsrc` HTML attribute

Patrick Brosset walked us through a proposal for the previewsrc HTML attribute, which would enable us to supply preview images for images that haven’t yet loaded using only HTML. For example, we could supply a blurry preview image. However, I’d rather have something like

:loaded

:not(:loaded)

so that we can style/transition unloaded images with CSS rather than needing to create extra images.

Thoughts?

Custom borders demo

Temani Afif shared a custom borders demo, where the trick is to declare a transparent border, use

border-shape

to define its shape, then declare a background in addition to

background-clip: border-area

so that it only shows up within the border, like this (requires Chrome at the moment):

How to animate the background color of `::selection`

In a similar manner, Leon Arnott shared this awesome trick for animating the background color of ::selection, something that’s actually forbidden (or so we thought, anyway…):

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…
[image or embed]

— Leon ._. (@leonarnott.bsky.social) 13:02 · Sep 17, 2026

Again, three simple steps:

Register --bg-color using @property
Animate --bg-color’s value using @keyframes
Declare —bg-color: inherit on ::selection

And that’s it, really. Simply use

var(--bg-color)

::selection

or some other visually restrictive element.

How to randomly animate an element along another element

Chris Coyier demonstrated how to random()ly animate an element along the edge of another element. There’s a cute doggo, by the way. Probably should’ve led with that.

Disabling the root scroller accidentally

Polypane explained how we might disable the root scroller accidentally (which is surprisingly easy to do — I’ve definitely done it), what we lose in doing so, and what to do instead.

Also, have you ever completely misunderstood how the root (

:root

html

) works? This is a solid explainer for that, too.

How to disable the double-tap-to-zoom-in functionality

Speaking of accidents, have you ever tapped on a target twice, apparently in quick succession, and ended up zooming in? Andy Bell revealed that touch-action: manipulation disables the double-tap-to-zoom-in functionality. It isn’t new, but I don’t see many web developers using it. One for the CSS reset, I think?

New web platform features and updates

Chrome and Firefox now ship every two weeks. The inaugural releases were fairly exciting (not smaller, as I assumed they’d be). In addition, Safari 27 (along with iOS, iPadOS, and macOS 27) shipped with some of the same features as Firefox, making them Baseline in the same release window. High fives all around!