Scroll-State Queries, Custom Borders and Baseline Wins: CSS Roundup

Safari 27 shipped ten new web platform features — nine of them reaching Baseline status — in the same release window in which Firefox and Chrome moved to a two-week shipping cadence. That alignment is the headline of the latest "What's !important" roundup, and it signals something concrete for practitioners: features such as alpha(), progress() and advanced attr() are now safe to treat as standard tooling rather than progressive enhancements.

What changed in the browsers?

The roundup's release inventory is unusually dense. Firefox 155 brought alpha(), progress() and advanced attr() to Baseline. Chrome 153 added scroll-axis-lock plus the <camera> and <microphone> elements, none of which Safari or Firefox support yet. Safari 27 alone delivered revert-rule, light-dark() image values, sizes=auto, three-plus 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 closed the cycle with at-rule() and overscroll-behavior: chain. The newsletter's verdict on the new cadence: the inaugural releases were "fairly exciting," not smaller.

Which techniques should you adopt now?

Preethi Sam demonstrated background image refraction effects built with CSS alone — no JavaScript, no duplicated image, animatable, with minimal markup. Brecht De Ruyte paired container style queries with advanced attr() to build customizable components, shipping interactive demos of the combination.

Dan Holloran covered the four scroll-state() query variants — scrollable, scrolled, snapped and stuck — in a short read the roundup recommends for exactly that brevity. The core pattern fits in three lines:

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

Bramus showed how to animate CSS grids using anchor positioning: content is anchored to its grid cell, so when the grid reflows, the content — not the cell — animates. The technique fails in Firefox due to what the roundup describes as a bug.

Temani Afif published a custom borders demo combining a transparent border, border-shape for geometry, and background-clip: border-area so the background renders only inside the border. It currently requires Chrome.

Can you animate ::selection after all?

Leon Arnott proved you can, despite the long-standing assumption that the selection highlight color is immutable. The method registers --bg-color with @property, animates its value with @keyframes, and declares --bg-color: inherit on ::selection. Applying var(--bg-color) to the pseudo-element or another visually restrictive element completes the trick.

Ahmad Shadeed tackled detecting overlapping elements with CSS, drawing on anchor positioning, scroll-driven animations and container style queries. Chris Coyier demonstrated how to randomly animate an element along the edge of another element using random() — with a dog in the demo.

What should you fix in existing code?

Polypane documented how easily a developer disables the root scroller by accident, what functionality is lost when that happens, and what to do instead. Andy Bell surfaced touch-action: manipulation, which disables double-tap-to-zoom on tap targets. The property is not new, but Bell notes few developers use it — a candidate for the CSS reset.

Victor Ayomipo addressed a quieter problem: container queries topped CSS wishlists for years, yet adoption has been poor. His argument is that developers are using them wrong, and his walkthrough corrects the record. Cory LaViska showed how to combine @custom-media with container style queries as a fallback pattern.

What is still at the proposal stage?

Patrick Brosset walked through a proposal for a previewsrc HTML attribute that would let developers supply preview images — for instance, blurry placeholders — for images that have not loaded, using HTML alone. The roundup's author countered with a preference for :loaded/:not(:loaded) pseudo-classes, which would allow styling and transitioning unloaded images in CSS without creating extra image files.

Chris Coyier catalogued a set of new HTML features that most practitioners have not yet encountered. Declan Chidlow collected what the roundup calls the craziest CSS ever written, much of it from Internet Explorer, including the memorable -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)".

One housekeeping note: the CSS-Tricks newsletter returns after four years, and the "What's !important" roundups move there starting November 10, publishing every two weeks. The next issue lands on a platform with a far larger inbox footprint — practitioners who want the release-by-release detail should subscribe before the cadence tightens.