Intent to Prototype: CSS view-transition-class and class VT argument syntax

198 views
Skip to first unread message

Vladimir Levin

unread,
Jan 19, 2024, 5:33:31 PMJan 19
to blink-dev, nrose...@chromium.org

Contact emails

vmp...@chromium.org, nrose...@chromium.org

Explainer

https://github.com/vmpstr/web-proposals/blob/main/explainers/view-transition-classes.md

Specification

https://drafts.csswg.org/css-view-transitions-2

Summary

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.



Blink component

Blink>ViewTransitions>SPA

Motivation

Similar to other style, repeating ids can get tedious which is why CSS has classes. This proposal aims to bridge the gap between CSS outside of view transition and CSS in the view transitions context. We'd like to introduce a new property called `view-transition-class`, which would take a list of custom-idents that will identify the elements by a class name. Note that the new property will not impact the construction of the pseudo tree: this is still built solely based on the `view-transition-name` property. We would also like to add new syntax to leverage the view-transition-class in the view transition pseudo element's selectors



TAG review

None (yet)

TAG review status

Not applicable

Risks



Interoperability and Compatibility

None



Gecko: No signal

WebKit: No signal

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None



Debuggability

None



Is this feature fully tested by web-platform-tests?

No (it will be)

Flag name on chrome://flags

None


Finch feature name

CSSViewTransitionClass


Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1519997

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5064894363992064

This intent message was generated by Chrome Platform Status.

Reply all
Reply to author
Forward
0 new messages