WebStorm需手动下载MDN兼容性数据才能显示CSS属性浏览器支持信息：进入Settings→Languages & Frameworks→JavaScript→Libraries，点击Download…并勾选MDN browser compatibility data，完成后悬停或按Ctrl+Q即可查看各浏览器最低支持版本。
WebStorm 本身不直接显示 CSS 属性的浏览器兼容性信息——它不会像 caniuse.com 那样弹出支持率图表或版本号。但你可以通过配置 + 外部数据源，在编辑器内获得近似“悬停即查”的兼容性提示，前提是正确打通 MDN 数据与 IDE 的语言服务。
WebStorm 怎么加载 MDN 浏览器兼容性数据
WebStorm 从 2021.3 版本起支持接入 @mdn/browser-compat-data，但它默认不自动下载，需手动触发：
- 打开
Settings/Preferences → Languages & Frameworks → JavaScript → Libraries - 点击右上角
Download...按钮 - 在弹窗中勾选
MDN browser compatibility data（注意不是“CSS support”或“Can I Use”） - 点
OK等待下载完成（约 30–60 秒，依赖网络）
完成后，当你在 CSS 文件中输入一个属性（如 gap、aspect-ratio），将光标停在上面并按 Ctrl+Q（Windows/Linux）或 Cmd+J（macOS），就会弹出文档摘要，其中包含「Browser compatibility」折叠区——点击展开就能看到各浏览器最低支持版本。
为什么悬停看不到兼容性，或者只显示“Not available”
常见原因不是插件没装，而是数据源未激活或路径错位：
立即学习“前端免费学习笔记（深入）”；
-
@mdn/browser-compat-data必须通过 WebStorm 内置的Download...加载，不能靠npm install到项目里——IDE 不会读node_modules中的这份数据 - 如果你用的是较老版本 WebStorm（MDN browser compatibility data 条目
- 部分 CSS 属性（如
contain-intrinsic-size）在 MDN 数据中尚未完整覆盖，此时会显示空或“Not available”，建议直接去mdn.io/contain-intrinsic-size查原始文档
如何快速验证某个 CSS 特性是否真能用
光看 WebStorm 提示不够，因为“支持该属性”不等于“支持你写的值组合”。比如：
-
background: image-set(...)在 Safari 15+ 支持，但只认1x/2x，不认width描述符 -
@container标注为 “Behind flag”，意味着 Chrome/Firefox 需开启实验性标志，Safari 尚未实现 -
scroll-behavior: smooth在 iOS Safari 15.4+ 才真正生效，旧版仅滚动无动画
所以更可靠的做法是：把 WebStorm 当作第一道过滤器，再用 caniuse.com 或 mdn.io 查具体参数和限制条件。例如搜 mdn.io/background-image-set，它会明确写出每个语法变体的支持状态，比 IDE 悬停信息更细粒度。
真正容易被忽略的是：WebStorm 的兼容性提示只反映“该属性是否存在”，不校验你是否写了浏览器不认的值（比如 gap: minmax(1rem, 1fr) 在 Safari 16.4 之前完全无效）。写完 CSS 后，别只信 IDE 的绿波浪线——打开目标浏览器的开发者工具，看 computed 样式里那条声明是否真的生效了。
