Chrome 147 ships scoped view transitions and new CSS color and border tools

Chrome 147 began rolling out on April 7 with element-scoped view transitions, the CSS contrast-color() function, and border-shape. Google’s release summary presents the three as tools for interactive motion, accessible color selection, and non-rectangular border rendering.

Transitions can stay inside a component

The new element.startViewTransition() method lets an arbitrary HTML element establish the transition scope. Its pseudo-elements are affected by ancestor clipping and transforms, and separate elements can run transitions concurrently. Scoped transitions can also be nested while the rest of the page remains interactive.

That changes the design space for dashboards and editors. A card can animate between states without taking over the document-wide transition layer, while another region continues its own update. The failure case is overlapping ownership: if parent and child components both start transitions for the same state change, visual output and cancellation rules need deliberate testing.

contrast-color() accepts a color and returns black or white based on which has higher contrast. It can simplify text color over dynamic swatches, but choosing between two candidates does not establish that every combination meets a project’s required contrast threshold. border-shape paints shaped borders and clips the inside, serving a different purpose from clip-path.

Add features as progressive enhancements

Start with a component whose static state is already usable. Feature-detect the new APIs, then layer in motion and shaped decoration. Test reduced-motion preferences, interruption, nested transforms, focus visibility, and high-contrast modes. For dynamic themes, keep automated contrast checks rather than treating contrast-color() as an accessibility guarantee. Chrome 147 makes these primitives available in one engine; shipping them broadly still requires the project’s browser-support data and a fallback that preserves meaning.