如何在CSS中检测浏览器对@view-transition navigation: auto的支持？

我完全懂你的困扰——Chrome 126确实正式引入了跨文档视图过渡特性，通过@view-transition { navigation: auto; }就能开启，但你尝试用@supports (navigation: auto)检测时却没触发，这其实是因为**navigation是@view-transition专属CSS规则下的属性，不能脱离上下文单独放在@supports里检测**。

浏览器的@supports需要识别完整且合法的CSS语法结构，单独写(navigation: auto)不符合语法要求——这个属性只能存在于@view-transition的块级规则中，所以Chrome 126自然不会把这个@supports条件判定为真。

现有CSS替代方案（局限性说明） #

你提到的通过视图过渡伪元素检测的方式：

@supports selector(::view-transition-old(root)) and selector(::view-transition-new(root)) {
  /* 浏览器支持视图过渡基础特性 */
}

确实能判断浏览器是否支持视图过渡，但正如你所说，它没法精准区分是否支持跨文档的navigation: auto——毕竟普通单页视图过渡在更早的Chrome版本就已经支持了。

暂时的折中方案（结合CSS+JS） #

如果想要更接近精准检测的效果，目前可以结合CSS和JavaScript：

1. 先用上面的伪元素@supports确保浏览器支持视图过渡基础特性；
2. 再用JavaScript通过CSSOM来判断浏览器是否识别navigation: auto属性：

const supportsCrossDocVT = () => {
  try {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync('@view-transition { navigation: auto; }');
    const rule = sheet.cssRules[0];
    return rule && rule.navigation === 'auto';
  } catch(e) {
    return false;
  }
};

if (supportsCrossDocVT()) {
  document.documentElement.classList.add('cross-doc-vt-supported');
}

之后你就可以在CSS中通过.cross-doc-vt-supported类来编写针对跨文档视图过渡的样式了。

需要注意的是，这种JS方法依赖当前浏览器的CSSOM实现，未来如果@supports支持检测嵌套at-rule属性的写法（比如@supports (@view-transition { navigation: auto; })），那就能回到纯CSS的检测方式了。

备注：内容来源于stack exchange，提问作者Oliver Schwarz