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

— 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) on ::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.

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!

Firefox 155
- alpha() (now Baseline)
- progress() (now Baseline)
- Advanced attr() (now Baseline)
Chrome 153
- scroll-axis-lock (no Safari or Firefox support)
- <camera> (no Safari or Firefox support)
- <microphone> (no Safari or Firefox support)
Safari 27
- revert-rule (now Baseline)
- alpha() (now Baseline)
- progress() (now Baseline)
- light-dark() image values (now Baseline)
- sizes=auto (now Baseline)
- 3+ color values for color-mix() (no Chrome support)
- ariaNotify (no Chrome support)
- stretch (no Firefox support)
- Transform-aware anchor positioning (no Firefox support)
- Customizable <select> (no Firefox support)
- :heading (no Chrome or Firefox support)
Chrome 154
- text-decoration-inset (no Safari support)
- frame-sizing (no Safari or Firefox support)
- scroll-marker-group modes (no Safari or Firefox support)
Firefox 157
- at-rule() (no Safari support)
- overscroll-behavior: chain (no Safari support)

And, as always, thanks for tuning in!

Fuente: Artículo original