← Back to release summary

CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

WPT details: https://wpt.fyi/results/css/css-pseudo/backdrop-pseudo-element-click.tentative.html https://wpt.fyi/results/css/css-pseudo/CSSPseudoElement-view-transitions-scoped.tentative.html https://wpt.fyi/results/css/css-pseudo/CSSPseudoElement-view-transitions.tentative.html https://wpt.fyi/results/css/css-pseudo/events-on-pseudo-element-mutation.tentative.html

Summary

Support for CSSPseudoElement - which is currently only defined for ::after, ::before, and ::marker - is now being extended to include several new pseudo-elements: ::backdrop: useful for closing a dialog when the backdrop is clicked, without interfering with clicks inside the dialog's content. This eliminates the need for complex intersection logic to determine where the click occurred. ::scroll-marker: can be used to collect click statistics. view transitions: enables geometry-aware view transitions.It also allows you to intercept a view transition mid-flight to start a new one, utilizing the coordinates of the currently animating element to avoid sudden visual jumps.

Motivation

Support for CSSPseudoElement - which is currently only defined for ::after, ::before, and ::marker - is now being extended to include several new pseudo-elements: ::backdrop: useful for closing a dialog when the backdrop is clicked, without interfering with clicks inside the dialog's content. This eliminates the need for complex intersection logic to determine where the click occurred. ::scroll-marker: can be used to collect click statistics. view transitions: enables geometry-aware view transitions.It also allows you to intercept a view transition mid-flight to start a new one, utilizing the coordinates of the currently animating element to avoid sudden visual jumps.

Standards & signals

Ecosystem

View on chromestatus.com