最可靠方法是访问https://caniuse.com/，它提供各浏览器对Web特性的实时支持数据、红绿标记、全球使用率及详细备注；命令行推荐npx caniuse-cli flexbox，而非已停更的caniuse-cmd；@supports和CSS.supports()仅检测当前浏览器解析能力，无法查历史版本兼容性。
直接查 caniuse 数据，别靠 VSCode 插件猜
VSCode 本身不提供浏览器支持率数据，所谓“在 VSCode 中检测”本质是调用外部服务或本地工具。最可靠、最常用的方式是访问 https://caniuse.com/ ——它背后是实时更新的 Can I Use 数据库，覆盖所有主流浏览器（包括 Safari 17.6、Chrome 126、Firefox 127、Edge 126 等）及历史版本。你在 VSCode 里写 display: flex，插件不会告诉你 IE9 是否支持；只有 caniuse 能给出明确红绿标记+百分比+备注（比如 “部分支持：无 wrap 换行”）。
命令行快速查：caniuse-cmd 不再维护，改用 npx caniuse-cli
旧版 caniuse-cmd 已停止更新，当前推荐用官方维护的 npx caniuse-cli。它无需全局安装，执行后直接返回结构化结果：
npm install -g caniuse-cli # 可选，仅需一次 npx caniuse-cli flexbox
输出含关键字段：stats（各浏览器版本支持状态）、usage_global（全球使用率）、notes（IE10 的 flex-direction bug 等细节）。注意：flexbox 是特性名，不是 CSS 属性名；查 gap 要输 flex-gap 或 grid-gap，不能只写 gap。
@supports 和 CSS.supports() 不是兼容性查询工具
这两个 API 检测的是「当前浏览器是否能解析该声明」，不是「该属性在历史上哪些版本支持」。它们无法回答“IE11 支持 aspect-ratio 吗？”这类问题：
立即学习“前端免费学习笔记（深入）”；
-
@supports (aspect-ratio: 1/1)在 Chrome 88+ 返回 true，在 Firefox 89+ 返回 true，但在 Safari 15.4 之前永远 false —— 因为 Safari 那时根本不认识这个语法，但你无法从结果反推出 Safari 15.4 是首个支持版本 -
CSS.supports('aspect-ratio', '1/1')在 Safari 15.4–17.3 会因 bug 返回 false，即使实际已支持；必须用单参数形式CSS.supports('aspect-ratio: 1/1') - 二者都不提供版本号、不区分部分支持、不涵盖已废弃的前缀写法（如
-webkit-aspect-ratio）
自动化集成：用 browserslist + postcss-reporter 查构建时兼容缺口
如果你已在项目中用 browserslist（例如 "last 2 versions, > 1%"），可配合 postcss-reporter 或 stylelint 插件，在保存 CSS 时实时提示不兼容项：
- 安装：
npm install --save-dev postcss postcss-reporter - 配置
postcss.config.js：module.exports = { plugins: [ require('autoprefixer'), require('postcss-reporter')({ clearReportedMessages: true }) ] } - 当写入
container: normal（仅 Chromium 111+ 支持）而目标浏览器包含 Safari 16 时，控制台会报：Unknown property 'container' (Autoprefixer will not add prefixes)，间接暴露兼容风险
真正要确认支持边界，还是得打开 caniuse 页面看那条横跨 2012–2026 的彩色时间轴——所有自动化工具都只是它的下游消费端，不是替代品。
