@supports 不能直接包裹 transition 声明，因其仅支持检测属性值对，而非动画能力；transition 应与被过渡的目标属性（如 backdrop-filter）一同置于 @supports 内，或对兼容性好的属性（如 opacity）置于外部。
@supports 不能直接包裹 transition 声明
很多人以为可以写 @supports (backdrop-filter: blur(1px)) { .card { transition: backdrop-filter 0.3s; } }，但这是无效的——@supports 只能包裹**完整声明块**，而 transition 本身不是功能特性，它只是控制动画行为的“胶水属性”。真正要检测的是被过渡的那个属性是否受支持，比如 backdrop-filter、inset 或 view-timeline。
所以正确做法是：先确保目标属性本身被浏览器支持，再给它加 transition。否则，即使写了 transition，目标属性不生效，过渡自然也看不到。
-
@supports检测的是声明对（property + value），不是动画能力 - 过渡失效的常见原因是目标属性压根没被解析（例如旧版 Safari 忽略
backdrop-filter） - 不要在
@supports里只写transition相关规则，它无法独立存在
transition 应该放在 @supports 外部还是内部？
取决于你是否希望降级时也保留基础动画感。比如 opacity 几乎全平台支持，那它的 transition 可以写在外面；但像 backdrop-filter 这种高阶属性，对应的 transition 就必须和它一起放进 @supports 块里，否则旧浏览器会尝试过渡一个根本不存在的属性，结果就是静默失败。
典型写法：
立即学习“前端免费学习笔记（深入）”；
.glass-card {
opacity: 0.8;
transition: opacity 0.2s ease; /* 全局可用的过渡 */
}
@supports (backdrop-filter: blur(1px)) {
.glass-card {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
transition: opacity 0.2s ease, backdrop-filter 0.3s ease; /* 增强版过渡 */
}
}- 把通用、兼容性好的过渡（如
opacity、transform）放外面 - 把依赖新属性的过渡（如
backdrop-filter、inset）和该属性一起包进@supports - 避免在
@supports外部单独声明transition: backdrop-filter ...，这会导致无效警告或被忽略
transition-behavior: allow-discrete 是个例外
transition-behavior: allow-discrete 是 Chrome 117+ 新增的实验性能力，它让原本不能插值的离散属性（如 display、visibility）也能参与过渡。但它本身是个 CSS 属性值，不是功能特性，所以不能用 @supports (transition-behavior: allow-discrete) 检测——目前没有浏览器支持这个语法。
真正可靠的检测方式是：
@supports (display: grid) and (transition-behavior: allow-discrete) {
/* 实际上这行永远不会命中，因为 transition-behavior 不支持这样检测 */
}- 目前唯一可行的方案是 JS 调用
window.CSS.supports('transition-behavior', 'allow-discrete') - 或者直接用
@supports (display: grid)作为代理条件（因为transition-behavior和display: grid都是较新特性，支持重合度高） - 更稳妥的做法：始终提供
max-height或opacity的 fallback 动画，不依赖allow-discrete
容易被忽略的组合陷阱
当多个属性同时过渡，且其中部分属性仅在新浏览器中有效时，整个 transition 简写可能被整体跳过。比如：transition: opacity 0.3s, backdrop-filter 0.3s, inset 0.2s; —— 如果浏览器不支持 inset，整条声明可能被丢弃（取决于解析器实现），导致 opacity 和 backdrop-filter 也失效。
- 拆开写更安全：
transition-property: opacity, backdrop-filter;+transition-duration: 0.3s, 0.3s; - 避免在单条
transition中混入不确定支持的属性 - 特别注意 Safari 对
inset和view-timeline的支持滞后，别默认它们和backdrop-filter同步可用
实际项目里最麻烦的不是写法，而是判断哪些属性值得用 @supports 包一层——很多所谓“新特性”其实在主力浏览器中已稳定三年以上，硬套检测反而增加维护成本。真正需要防护的，往往是那些刚进标准、厂商实现不一、或仅限特定平台（如 iOS Safari）的功能分支。
