如何检查CSS中浏览器对@view-transition导航的支持：自动？

Question

Google Chrome 126 在 CSS 中引入了跨文档视图转换（source）和

@view-transition {
    navigation: auto;
}

现在我想检查用户浏览器的支持：

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

但是在 Chrome v126 中测试 @supports 不会被触发，请参阅此 codepen 作为示例：https://codepen.io/olvrschwrz/pen/YzoqYYG

我预计

@supports (navigation: auto)

在 Chrome v126 及更高版本中被评估为 true。

可以解决问题并将

@supports

与选择器

::-view-transition-old(root)

和

::view-transition-new(root)

一起使用，但这不会明确检查跨文档视图转换。

Answer 1

navigation

不是一个属性，而是一个描述符，目前无法用

@supports

进行测试。 CSSWG 最近解决了定义

at-rule(@rule, descriptor: value)

来满足这一需求。例如，

@supports at-rule(@view-transition, navigation: auto) {}

。

作为解决方法，您可以将相关 CSS 提取到其自己的文件中，并在文档的

<script>

中使用此

<head>

加载它：

<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>

如何检查CSS中浏览器对@view-transition导航的支持：自动？

问题描述投票：0回答：1

1个回答

最新问题

如何检查CSS中浏览器对@view-transition导航的支持：自动？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1