检测css自定义属性支持必须用@supports(color: var(--x))或css.supports('--prop: value')，缺值、加括号、只传属性名均失效，二者均验证语法解析能力而非变量赋值状态。
直接用 caniuse.com 查，别跑偏——它不是“工具”，而是你该先打开的网站；其他所谓“CSS工具”要么是包装层，要么只解决局部问题。
caniuse.com 怎么查才不翻车
搜对名字比什么都重要。比如：
- CSS 自定义属性（
--theme-color）得搜css-variables，不是--theme-color或custom-properties -
position: sticky搜sticky，不是position-sticky -
@container搜container-query，注意带横线 - IE 的支持状态默认不显示，必须点「Show all browsers」手动勾选
看到黄色“部分支持”时，一定点开「Notes」——比如 gap 在 Safari 14.0–14.1 中不支持在 flex 容器里用，只认 grid；:has() 在 Chrome 105+ 才支持嵌套写法，旧版只认顶层单层。
doiuse 是什么，什么时候该用它
doiuse 是个命令行工具，适合 CI/CD 或本地批量扫 CSS 文件，但它不替代 caniuse，只做“已写代码”的合规检查。
- 安装：
npm install -g doiuse - 检测单个文件：
doiuse styles.css - 指定目标浏览器：
doiuse --browsers "last 2 versions, >1%" styles.css - 它不会告诉你“怎么改”，只报错：比如
display: grid在 IE 11 不支持、aspect-ratio在 Safari 15.4 前不支持 - 它依赖 caniuse 数据库，所以数据时效性和 caniuse 一致，但无法反映运行时行为差异（比如
backdrop-filter在 iOS Safari 15.4+ 支持但耗电剧增）
@supports 和 CSS.supports() 别混用
@supports 是 CSS 规则，CSS.supports() 是 JS API，语法和限制完全不同：
- CSS 里写：
@supports (display: flex) { ... }—— 括号可省，and/or/not可嵌套 - JS 里必须写：
CSS.supports('display: flex')—— 单参数字符串，不能加括号，也不能拆成两个参数 -
CSS.supports('--color: red')✅；CSS.supports('--color', 'red')❌（Safari 16.4–17.3 直接返回false） -
CSS.supports('(--color: red)')❌（Chrome 120+、Safari 17.4 已确认失效） - IE 完全不支持
CSS.supports()，Edge 12+ 才开始有
Modernizr 还值得用吗
Modernizr 现在主要价值不是“检测”，而是“注入 class”和“降级兜底”。它不查 caniuse 数据，而是靠真实 DOM 测试，结果更贴近实际渲染行为：
- 它能测出
dialog元素是否真支持showModal()，而 caniuse 只标“Safari 16.4+” - 它生成的
.no-flexbox类可直接用于 CSS 分支：.no-flexbox .container { display: block; } - 它不检测
@container这类仍需 flag 的特性，因为没对应 DOM 测试路径 - 体积不小（压缩后约 14KB），纯静态站点或现代项目中，多数场景用
@supports+ caniuse 就够了
真正容易被忽略的是：caniuse 告诉你“支持”，不代表你写的那行 CSS 在当前上下文生效——比如 --var 在 @keyframes 里被忽略、contain: layout 在某些老安卓 WebView 里静默失效。验证必须落到真实环境，而不是查完就放心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
