{"id":6438,"date":"2026-10-28T01:57:18","date_gmt":"2026-10-28T04:57:18","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/10\/28\/whats-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more\/"},"modified":"2026-10-28T01:57:18","modified_gmt":"2026-10-28T04:57:18","slug":"whats-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/10\/28\/whats-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more\/","title":{"rendered":"What\u2019s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More"},"content":{"rendered":"
\n
\u2014 Leon ._. (@leonarnott.bsky.social<\/a>) 13:02 \u00b7 Sep 17, 2026<\/a><\/p><\/blockquote>\n<\/blockquote>\n

Again, three simple steps:<\/p>\n

    \n
  1. Register --bg-color<\/code> using @property<\/code><\/li>\n
  2. Animate --bg-color<\/code>\u2019s value using @keyframes<\/code><\/li>\n
  3. Declare \u2014bg-color: inherit<\/code> on ::selection<\/code><\/li>\n<\/ol>\n

    And that\u2019s it, really. Simply use var(--bg-color)<\/code> on ::selection<\/code> or some other visually restrictive element.<\/p>\n

    How to randomly animate an element along another element<\/h2>\n

    Chris Coyier demonstrated how to random()<\/code>ly animate an element along the edge of another element<\/a>. There\u2019s a cute doggo, by the way. Probably should\u2019ve led with that.<\/p>\n

    Polypane explained how we might disable the root scroller accidentally<\/a> (which is surprisingly easy to do \u2014 I\u2019ve definitely done it), what we lose in doing so, and what to do instead.<\/p>\n

    Also, have you ever completely misunderstood how the root (:root<\/code>\/html<\/code>) works? This is a solid explainer for that, too.<\/p>\n

    How to disable the double-tap-to-zoom-in functionality<\/h2>\n

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

    New web platform features and updates<\/h2>\n

    Chrome and Firefox now ship every two weeks. The inaugural releases were fairly exciting (not smaller, as I assumed they\u2019d 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!<\/p>\n