[css-view-transitions-2] Feature detection for VT cross-document

[khushalsagar]

Authors need to be able to detect support for cross-document ViewTransitions, both in CSS and JS. In JS, there's a few options like whether there is viewTransition attribute on pageconceal/pagereveal events. Also CSS.supports(@view-transition) to check if the at-rule is valid CSS syntax.

For CSS, this can be checked with @supports(@view-transition) but its unclear whether that's enough or active-view-transition should be the recommendation. Since that tells you whether there is a transition in progress right now as opposed to whether the feature is supported by the browser.

[khushalsagar]

There's multiple ways to detect this in JS. For example, whether CSSOM has the viewTransition rule. And the CSS detection can use @supports for the view-transition at-rule.

[suraj-sundariya]

Is this working?

As I'm on Chrome 126 version which supports MPA but still

if (CSS.supports('@view-transition')) {
    console.log('The @view-transition at-rule is supported.');
} else {
    console.log('The @view-transition at-rule is not supported.');
}

giving me The @view-transition at-rule is supported

[SebastianZ]

And the CSS detection can use @supports for the view-transition at-rule.

I'm happily proven wrong but I don't think that's currently possible, because the resolution of #2463 (comment) still didn't make it into the spec. and much less into browsers.

With that, support checking general support for @view-transition can be done like this in CSS:

@supports at-rule(@view-transition) {
  …
}

Analogous, in JS this would look like this:

if (CSS.supports('at-rule(@view-transition)') {
  …
}

or by checking for the CSSViewTransitionRule interface:

if (CSSViewTransitionRule) {
  …
}

Sebastian

[khushalsagar]

Thanks for bringing this up Suraj. The chromium bug for this feature is here. Please +1 to bump it on the priority list.

In the meantime, there's a couple of ways that should work.

• In CSS, :root:active-view-transition would activate if there is a transition running. You can use it to limit styles which should only apply when there is a transition. You can also use types to limit to navigation specific transitions. For example,

:root:active-view-transition #foo {
   view-transition-name: foo;
}

/* or */

@view-transition {
  navigation: auto;
  types: navigation;
}

:root:active-view-transition(navigation) #foo {
   view-transition-name: foo;
}

• In script, pageswap and pagereveal events are fired when navigating away and to a page respectively. If the event has the viewTransition attribute then VT cross-document is supported. For example,

let supportsCrossDocVt = typeof PageSwapEvent != "undefined" && Object.hasOwn(PageSwapEvent.prototype, 'viewTransition');

Would these suffice? If not, please let me know the use-case and I'll try to see if there's a better suggestion.