@supports 规则是基于浏览器是否真正支持某css特性来应用样式的安全手段，语法要求属性和值加引号，支持and/or/not组合判断，需配合html类名做渐进式降级，并注意早期实现兼容性问题。
用 @supports 规则做 CSS 特性检测，是让现代样式安全落地的核心手段——它不依赖浏览器版本，只看当前环境是否真能解析并生效某个 CSS 声明。
直接写 @supports 判断单个特性
语法简单明确，括号内填属性名和值（必须加引号），浏览器支持就执行块内样式：
@supports (display: grid) { .container { display: grid; } }@supports (aspect-ratio: 1/1) { .card { aspect-ratio: 1/1; } }@supports (container-type: inline-size) { @container (min-width: 400px) { .item { font-size: 1.2em; } } }
注意：属性和值都得是字符串形式，CSS.supports('display', 'grid') 是 JS 写法，@supports 里不能省略引号，也不能写成变量。
组合多个条件提升判断精度
用 and、or、not 连接判断，避免误判或过度降级：
-
@supports (display: grid) and (gap: 1rem) { .grid { gap: 1rem; } }—— 同时支持才启用间距 -
@supports (inset: 0) or (position: sticky) { .header { position: sticky; top: 0; } }—— 任一可用就固定头部 -
@supports not (backdrop-filter: blur(4px)) { .modal { background: rgba(0,0,0,.8); } }—— 不支持毛玻璃时给纯色背景
别把 @supports 当媒体查询用，它不响应视口变化，只在样式表加载时静态计算一次。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
搭配 HTML 类名做渐进式降级
仅靠 @supports 不够覆盖老浏览器（比如 IE 完全不识别该规则），需配合类名兜底：
- Modernizr 会在
上加cssgrid或no-cssgrid类 - 对应写两套规则：
.cssgrid .layout { display: grid; }和.no-cssgrid .layout { display: flex; } - 没用 Modernizr 的话，可手动加类或用 JS 检测后动态写入：
document.documentElement.classList.toggle('has-grid', CSS.supports('display', 'grid'))
关键点：必须同时定义 .feature 和 .no-feature 规则，否则旧浏览器会直接跳过所有样式。
避开常见陷阱
@supports 返回 true ≠ 样式一定按预期渲染，尤其要注意早期实现的兼容性问题：
- Safari 15.4+ 才真正支持
@supports (contain: layout)的第二参数写法，旧版只能用字符串规则@supports (contain: layout) - Chrome 早期版本支持
@supports selector(:focus-visible)语法，但实际伪类行为有偏差 -
@supports不检测运行时行为（比如scroll-snap是否真能吸附），只确认声明能否被解析
对关键布局或动效，建议在 @supports 块内再加一层视觉 fallback，比如用 border 替代 box-shadow，或用 transform 替代 offset-anchor。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
