The latest Chrome 144 beta is officially here, and for front-end engineers pushing the limits of modern CSS, this release is a massive win. From refined anchor positioning to the highly anticipated scroll-state container queries, the Chromium team is handing us the tools to build more responsive, performant, and accessible interfaces without the heavy JavaScript overhead. Let’s dive into the technical highlights of this release.
Next-Level Anchor Positioning with Transforms
CSS Anchor Positioning is already transforming how we handle tooltips, menus, and overlays. In Chrome 144, this feature gets even more robust by correctly handling transform properties. Previously, tethering elements to anchors with active transforms could lead to layout headaches. Now, the browser intelligently resolves anchor() and anchor-size() functions against the bounding box of the transformed anchor. This ensures your UI components remain perfectly aligned, even when scaling or rotating parent elements.
Styling the Search Experience with ::search-text
Accessibility and branding just got a major boost with the introduction of the ::search-text highlight pseudo-element. We’ve long had control over ::selection and ::spelling-error, but find-in-page styling was largely left to the browser’s default. Now, developers can customize foreground and background colors or add text decorations to search results. This is a game-changer for maintaining brand consistency and ensuring high contrast on pages with non-standard color palettes.
Reactive UI with @scroll-state
One of the most exciting additions in this beta is support for @scroll-state within the scrolled context. This allows you to style descendants based on the container’s current scroll direction. By setting container-type: scroll-state, you can create dynamic headers that shrink when scrolling down or reveal navigation elements when scrolling up—all purely in CSS. This level of declarative interaction significantly reduces the need for scroll listeners and the subsequent main-thread performance hits.
Refining overscroll-behavior and Accessibility
Chrome 144 addresses critical edge cases in scroll chaining and semantic relationships. Keyboard users will now see consistent behavior as the browser finally respects overscroll-behavior for keyboard-driven scrolls, preventing unwanted propagation to parent containers. Additionally, overscroll-behavior now applies to non-scrollable containers, allowing you to prevent scroll propagation on hidden backdrops or static elements with overflow: hidden.
Semantic Cleanup: aria-details and Anchors
In a move toward cleaner accessibility trees, Chrome has refined how aria-details interacts with anchor positioning. The browser will no longer automatically create these relationships for non-popover use cases where the connection is non-semantic. This ensures that assistive technologies provide more accurate information to users, focusing on intentional relationships rather than accidental implementation side-effects.
Chrome 144 continues the trend of moving complex UI logic from JavaScript into the CSS engine, giving us a faster, more resilient web. Whether you’re optimizing for touch, mouse, or keyboard, these updates provide the granular control needed for top-tier user experiences.
Source: Read the full article here.