How check browser support in CSS for @view-transition navigation: auto?

Google Chrome 126 is introducing cross-document view transitions in CSS (source) with

@view-transition {
    navigation: auto;
}

Now I would like to check the support of the user's browser with:

@supports (navigation: auto) {
    --available: true;
}

But testing in Chrome v126 the @supports is not triggered, please see this codepen as an example: https://codepen.io/olvrschwrz/pen/YzoqYYG

I would expect that the @supports (navigation: auto) is evaluated as true in Chrome v126 and onwards.

One could work around and use @supports with selectors ::-view-transition-old(root) and ::view-transition-new(root) but this would not explicitly check on cross-document view transition.

Solution

navigation is not a property but a descriptor, which cannot be tested with @supports at the moment. The CSSWG recently resolved on defining at-rule(@rule, descriptor: value) to address this need. For example, @supports at-rule(@view-transition, navigation: auto) {}.

As a workaround, you can extract the related CSS in its own file and load it with this <script> in the <head> of your document:

<script>
    function supportsAtRule(rule) {
        const sheet = new CSSStyleSheet()
        sheet.replaceSync(rule)
        return sheet.cssRules[0]?.cssText === rule
    }
    if (supportsAtRule('@view-transition { navigation: auto; }')) {
        const link = document.createElement('link')
        link.rel = "stylesheet"
        link.href = 'view-transitions.css'
        document.head.appendChild(link)
    }
</script>