--- title: What’s !important #19: CSS Refraction Effects, Scroll... description: This CSS-Tricks roundup collects recent CSS and web platform tutorials and news after a site hiatus. It covers background image refraction effects made with... canonical: https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More | daily.dev og:description: This CSS-Tricks roundup collects recent CSS and web platform tutorials and news after a site hiatus. It covers background image refraction effects made with... og:url: https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki og:image: https://api.daily.dev/og/posts/eadL0Z3kI.png og:image:alt: What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 6 min read · 7 upvotes · 1 comments ## Summary This CSS-Tricks roundup collects recent CSS and web platform tutorials and news after a site hiatus. It covers background image refraction effects made with CSS, building components with container style queries and attr(), and the new scroll-state() queries (scrollable, scrolled, snapped, stuck). Other links cover animating CSS grids with anchor positioning (which does not work in Firefox, possibly due to a bug), using @custom-media as a container query fallback, detecting overlapping elements, and animating ::selection background color via @property and @keyframes. It also lists browser release notes: Firefox 155 ships alpha(), progress() and advanced attr() as Baseline, Safari 27 ships alpha() and progress() as Baseline, while Chrome 153 and 154 add features like scroll-axis-lock and text-decoration-inset. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What do the CSS scroll-state() container queries do and what values do they support? The scroll-state() container query lets you style elements based on scroll conditions using the values scrollable, scrolled, snapped, and stuck. For example, @container scroll-state(stuck: top) targets an element currently stuck to the top during scrolling, useful for styling sticky headers without JavaScript. _Developers adopting new CSS scroll features can track browser support changes like this on daily.dev._ ### How can I disable the double-tap-to-zoom behavior on buttons without JavaScript? Applying touch-action: manipulation to an element disables the double-tap-to-zoom-in functionality on touch devices. This is not a new CSS property, but it is underused by web developers and is a good candidate to include in a standard CSS reset to prevent accidental zooming on buttons. _Front-end developers polishing mobile touch interactions keep tabs on practical CSS fixes like this via daily.dev._ ### Which CSS features became Baseline with the Firefox 155 and Safari 27 releases? Firefox 155 and Safari 27 shipped in the same release window and both made alpha(), progress(), and advanced attr() Baseline. Safari 27 additionally shipped revert-rule, light-dark() image values, and sizes=auto as Baseline, while Chrome lacks support for some Safari 27 features like 3+ color values in color-mix() and ariaNotify. _Developers planning cross-browser CSS support check Baseline milestones like these through daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@user45613** · 1 upvotes > indeed !important ## Similar posts on daily.dev - [What’s \!important \#4: Videos & View Transitions, Named Media Queries, How Browsers Work, and More](https://daily.dev/posts/what-s-important-4-videos-view-transitions-named-media-queries-how-browsers-work-and-more-y9o607ler) · CSS-Tricks · 4 upvotes · 0 comments - [Background Image Refraction in CSS – Master.dev Blog](https://daily.dev/posts/background-image-refraction-in-css-master-dev-blog-akrpxt5sa) · Frontend Masters · 6 upvotes · 1 comments - [What’s \!important \#6: :heading, border-shape, Truncating Text From the Middle, and More](https://daily.dev/posts/what-s-important-6-heading-border-shape-truncating-text-from-the-middle-and-more-4aztpdkzy) · CSS-Tricks · 2 upvotes · 0 comments - [7 Game-Changing Web UI Features You Can Start Using Today](https://daily.dev/posts/7-game-changing-web-ui-features-you-can-start-using-today-lanxczirv) · Amit Merchant · 6 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More","url":"https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki"},"datePublished":"2026-10-27T15:12:49.599Z","dateModified":"2026-10-27T15:29:31.634Z","description":"This CSS-Tricks roundup collects recent CSS and web platform tutorials and news after a site hiatus. It covers background image refraction effects made with...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5d83ff460fca2b537281f109ef04e248?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5d83ff460fca2b537281f109ef04e248?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,css","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki","comment":[{"@type":"Comment","text":"indeed !important","datePublished":"2026-10-27T15:43:16.107Z","url":"https://daily.dev/posts/eadL0Z3kI#c-c7RdnRa1g","author":{"@type":"Person","name":"Veselin Ivanov","url":"https://daily.dev/user45613","image":"https://media.daily.dev/image/upload/s--nc0o8dM8--/f_auto/v1782457323/avatars/avatar_JYf2mTyl8QY4B2HJp3soD?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/what-s-important-19-css-refraction-effects-scroll-state-queries-custom-media-and-more-eadl0z3ki#faq","mainEntity":[{"@type":"Question","name":"What do the CSS scroll-state() container queries do and what values do they support?","acceptedAnswer":{"@type":"Answer","text":"The scroll-state() container query lets you style elements based on scroll conditions using the values scrollable, scrolled, snapped, and stuck. For example, @container scroll-state(stuck: top) targets an element currently stuck to the top during scrolling, useful for styling sticky headers without JavaScript. Developers adopting new CSS scroll features can track browser support changes like this on daily.dev."}},{"@type":"Question","name":"How can I disable the double-tap-to-zoom behavior on buttons without JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Applying touch-action: manipulation to an element disables the double-tap-to-zoom-in functionality on touch devices. This is not a new CSS property, but it is underused by web developers and is a good candidate to include in a standard CSS reset to prevent accidental zooming on buttons. Front-end developers polishing mobile touch interactions keep tabs on practical CSS fixes like this via daily.dev."}},{"@type":"Question","name":"Which CSS features became Baseline with the Firefox 155 and Safari 27 releases?","acceptedAnswer":{"@type":"Answer","text":"Firefox 155 and Safari 27 shipped in the same release window and both made alpha(), progress(), and advanced attr() Baseline. Safari 27 additionally shipped revert-rule, light-dark() image values, and sizes=auto as Baseline, while Chrome lacks support for some Safari 27 features like 3+ color values in color-mix() and ariaNotify. Developers planning cross-browser CSS support check Baseline milestones like these through daily.dev."}}]} ```