View transition classes

[hvanops]

Description

This feature introduces a new CSS property view-transition-class which allows the developer to specify one or more view transition classes. The developer can then select the ViewTransition pseudo elements using these classes (e.g. ::view-transition-group(*.class)).

This is an extension to the ViewTransition API that simplifies styling of view transition pseudo elements in a similar way that CSS classes simplify styling of regular DOM elements.

Specification

https://drafts.csswg.org/css-view-transitions-2/#view-transition-class-prop

Additional Signals

Standards Positions
Gecko No information - mozilla/standards-positions#988
WebKit Positive and shipping in STP - WebKit/standards-positions#321

Tests
https://wpt.fyi/results/css/css-view-transitions/parsing?label=experimental&label=master&aligned
https://wpt.fyi/results/css/css-view-transitions (pseudo-with-classes-*)

Browser Bugs
Chromium

Additional Signals
This was originally discussed in w3c/csswg-drafts#8319. A few developers outside of Google showed interest.
Use cases:
List to details view [link] - developers are using JS to achieve this today, but it’s not easy

[captainbrosset]

In preliminary results to the State of CSS 2024 survey, View Transitions came up as the 5th most common answer to the question "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?".

(can't share a link yet as these are preliminary results)