CSS-Tricks returns with a dense roundup of pure-CSS refraction effects, scroll-state container queries, anchor-positioned grid animations, and rapid browser releases that push alpha(), progress(), and customizable selects to Baseline.
CSS-Tricks is back with a stacked roundup, and the newsletter returns Nov. 10. These roundups move to the inbox every two weeks. Subscribe if you want front-end updates delivered to your inbox; sponsors can reach the team through the same channel.
Before the features, a quick note: Mat Marquis runs a JavaScript for Everyone course, and readers can apply the code CSSTRICKSFRIENDS for 30% off.
Preethi Sam built background image refraction effects with pure CSS. You animate them without JavaScript, avoid duplicating assets, and keep the markup lean. The visual result bends light through images as if through glass.
Brecht De Ruyte pushed component customization further with container style queries and advanced attr(). His interactive demos show how components respond to their own layout conditions rather than global viewport rules.
Dan Holloran mapped the four scroll-state queries: scrollable, scrolled, snapped, and stuck. The syntax stays tight. You write @container scroll-state(stuck: top) { ... } and the container applies those rules based on scroll position.
Declan Chidlow dug through the archives for the strangest CSS ever written. Most of it comes from Internet Explorer. Remember -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";? Modern browsers don’t need these hacks, and the contrast highlights how clean current specs have become.
Bramus demonstrated grid animation through anchor positioning. You anchor content to its corresponding cell. Cells resize, and the anchored content moves with them rather than snapping to new positions. Firefox has a bug that blocks this, so test in Chrome or Safari.
Chris Coyier covered new HTML features that have slipped past many developers. The list is long, and several elements and attributes change how you structure documents without extra scripting.
Victor Ayomipo asked why container query adoption remains low despite years at the top of developer wishlists. He argues browser support is solid. The gap lies in application methods. We apply container queries like media queries instead of treating them as component-level layout tools.
Cory LaViska paired @custom-media with container style queries to create robust fallbacks. You define media-like conditions that work alongside container logic, giving older browsers a graceful path.
Ahmad Shadeed tackled overlapping element detection with CSS. His walkthrough relies on anchor positioning, scroll-driven animations, and container style queries. If you work with dense interfaces, this approach replaces JavaScript collision detection.
Patrick Brosset proposed the previewsrc HTML attribute. It lets you supply a preview image for assets that haven’t loaded yet, using only HTML. You could serve a blurry placeholder without scripting. The author prefers a different path: native :loaded and :not(:loaded) selectors that let you style and transition unloaded images directly with CSS, removing the need for duplicate preview assets.
Temani Afif shared a custom borders technique that uses transparent borders, border-shape, and background-clip: border-area. The background fills only the border region, creating geometric outlines. The technique works in Chrome only.
Leon Arnott cracked the restriction on animating ::selection backgrounds. You register --bg-color through @property, animate the value with @keyframes, and declare --bg-color: inherit on ::selection. The result is a smooth color transition on text selection.
Chris Coyier also showed how random() animates an element along the edge of another. The demo includes a dog, which makes the technique easier to remember.
Polypane explained how easy it is to disable the root scroller by accident. Once you break it, you lose native scroll behaviors that users expect. The article also clarifies how :root and html interact, which helps you avoid the mistake in the first place.
Andy Bell pointed out touch-action: manipulation. It disables the double-tap-to-zoom behavior on mobile browsers. Few developers include it in resets, but it belongs there.
The browser release cycle accelerated. Chrome and Firefox now ship every two weeks. The first releases under this schedule delivered substantial features, not minor patches.
Safari 27 arrived with features that matched Firefox’s release window, pushing several capabilities to Baseline in the same window. Firefox 155 added alpha() and progress(). Chrome 153 introduced scroll-axis-lock, <camera>, and <microphone>. Safari 27 brought revert-rule, alpha(), progress(), light-dark() image values, sizes=auto, 3+ color values for color-mix(), ariaNotify, stretch, transform-aware anchor positioning, customizable <select>, and :heading. Chrome 154 followed with text-decoration-inset, frame-sizing, and scroll-marker-group modes. Firefox 157 added at-rule() and overscroll-behavior: chain.
These updates mean you can rely on modern layout, animation, and selection styling without polyfills in more browsers than before. Check your feature targets, update your resets, and test the new scroll-state and anchor-positioning patterns in production.