Chrome CSS Wrapped 2025: What You Can Actually Use Today

Chrome’s CSS Wrapped 2025 is packed with new features, but it does not tell you the one thing you actually need to know: can you use this in production today?

This post is a practical tracker. Each feature is broken down into a quick, plain-English summary, paired with browser support data from my <CanIUse /> component so you can decide in seconds whether it is worth reaching for.

Customizable Components

These features push more UI behavior into HTML and CSS. That means less JavaScript, fewer edge cases, and more native patterns.

Invoker Commands

Invoker commands let buttons control dialogs and popovers with pure HTML. No click handlers and no wiring. You point a button at a target and declare whether it opens, closes, or toggles. For common UI patterns, this removes a surprising amount of JavaScript.

Dialog Light Dismiss

The closedby attribute lets you control exactly how a <dialog> can be dismissed. You can allow Escape, outside click, both, or neither. It is a small detail, but it gives you tighter control over UX without extra event handling.

popover=hint

popover="hint" is designed for lightweight UI like tooltips, previews, and hover cards. Unlike regular popovers, hints do not force others to close. This makes layered UI feel natural instead of fragile.

Customizable select

appearance: base-select turns <select> into something you can actually style. You keep the native behavior, but gain control over the button, dropdown, and richer option content without rebuilding everything from scratch.

::scroll-marker/button()

::scroll-button() and ::scroll-marker() add built-in controls to scroll containers. They make it much easier to build carousels and similar UI with native buttons and position markers instead of custom JavaScript.

scroll-target-group

scroll-target-group turns a set of links into scroll-aware navigation. Think table of contents or scrollspy handled by the browser instead of custom JavaScript.

Anchored container queries

Anchored container queries let positioned elements react to where they actually end up after layout. This solves edge cases like tooltips flipping and keeps arrows and UI details aligned without hacks.

Interest invokers

interestfor lets UI respond to hover or focus before a full click happens. It pairs well with popover="hint" for previews, tooltips, and hover-driven UI.

Next-gen Interactions

This is where CSS starts replacing JavaScript-heavy interaction patterns, especially anything tied to scroll, state, or layout awareness.

Scroll-state queries

Scroll-state queries let CSS respond when something is stuck, snapped, or scrollable. This replaces a class of scroll listeners with pure CSS, which is cleaner and easier to maintain.

Tree counting functions

sibling-index() and sibling-count() give CSS awareness of position and group size. This is useful for staggered animations and layouts that adapt automatically as content changes.

scrollIntoView() container

The container option for scrollIntoView() limits scrolling to the nearest scrollable ancestor. This is useful in complex layouts where you want to move one panel without shifting the entire page.

Nested View Transition Groups

Nested view transition groups preserve more of the original structure during transitions. This helps maintain clipping and 3D effects instead of flattening everything into a single layer.

DOM State-Preserving Move

moveBefore() lets you move elements in the DOM without resetting them. Media keeps playing, iframes stay loaded, and form state survives.

Optimized ergonomics

Smaller features, but high leverage. These are the ones that quietly reduce complexity across your codebase.

Advanced attr() function

The upgraded attr() turns HTML attributes into real CSS values instead of just text. This means attributes can drive colors, sizes, and more, which enables simple data-driven styling patterns without JavaScript.

ToggleEvent.source

ToggleEvent.source tells you which element triggered a popover, dialog, or <details>. This is helpful when multiple controls can affect the same UI.

text-box features

text-box gives you better control over how text sits inside its container. It helps headings and buttons feel visually centered, even with imperfect font metrics.

shape() function

shape() lets you define more complex and responsive shapes directly in CSS. It is a flexible alternative to polygons for clipping and masking.

if() statements

if() brings conditional syntax similar to JavaScript’s ternary operator to CSS. You can base your conditional on media(), supports(), or style() queries, and keep your logic close to the property it affects.

Custom Functions

@function lets you define reusable CSS functions with named inputs. It is a clean way to share calculations and reduce repetition in larger stylesheets.

Expanded range syntax

Range syntax allows comparisons like < and > inside style queries and if(). This makes threshold-based styling easier to express in pure CSS.

Stretch sizing keyword

The stretch keyword lets elements fill available space more reliably than 100%. It avoids common layout issues with margins and box sizing.

corner-shape

corner-shape expands what you can do beyond simple rounded corners. You can bevel, notch, scoop, or create squircle-like shapes for more distinctive UI.