caniuse.com查css兼容性需用标准slug格式（如flexbox、css-grid），不支持display: flex等声明式写法；绿色勾选≠完全可用，须点notes看限制；ie数据默认隐藏，需手动开启；移动端须切mobile tab验证。
直接搜属性名，但必须用标准 slug 格式
caniuse.com 不认你写的 display: flex 或 place-items 这种带冒号或 CSS 声明格式的词，它只匹配 URL 后缀（即 slug），比如 flexbox、css-grid、sticky。搜错就 404。
常见映射偏差：
-
--my-var要搜css-variables -
aspect-ratio对应css-aspect-ratio -
@container是container-query -
:has()搜css-has-selector
不确定时，先在 caniuse.com 首页搜索框输关键词，看自动补全推荐的 slug；或者查 MDN 页面右下角「Browser compatibility」栏里给出的 caniuse 链接，抄那个 URL 最后一段。
看到黄色“部分支持”别跳过 Notes 栏
绿色打钩 ≠ 安全可用，很多属性在某个浏览器里只支持子集。比如 backdrop-filter 在 Safari 支持，但早期版本不支持 url() 滤镜值；gap 在 Firefox 63+ 才支持 Grid 中的 gap，之前只认 grid-gap。
点击「Notes」展开后常有关键限制：
- 是否需开启实验性 flag（如
@starting-style） - 是否仅在特定上下文生效（如
inert在 iframe 里无效） - 是否缺失某类值支持（如
scroll-behavior: smooth在 Safari 不支持auto值）
IE 兼容性默认隐藏，得手动打开
caniuse 默认不显示 IE 数据——不是因为它不支持，而是因为统计权重低。如果你项目仍需兼容 IE11，必须勾选页面左上角「Show all browsers」，否则看不到红色叉叉。
另外注意：
- IE 对 CSS 自定义属性（
--foo）完全不支持，没 fallback 就会失效 -
flex在 IE10/11 用的是旧语法（display: -ms-flexbox），Autoprefixer 会加前缀，但 JS 检测时要用typeof window.CSS !== 'undefined' && CSS.supports('display', 'flex')，不能只靠'flex' in document.body.style
移动端数据要单独切 Tab 看
桌面版支持率高 ≠ 移动端没问题。比如 dialog 在 Chrome Desktop 全支持，但在 Android WebView 89 以下不支持 showModal()；scroll-snap-type 在 iOS Safari 14.5+ 才稳定生效。
操作很简单：在 caniuse 页面顶部切换到「Mobile」Tab，再拉到最右看各 Android/iOS 版本列。别依赖「Global usage」数字——它按用户量加权，可能掩盖小众但关键的设备问题。
真正容易被忽略的点是：caniuse 的「Mobile」数据来自 StatCounter，而国内厂商定制 ROM（如华为 EMUI、小米 MIUI）的 WebView 内核版本往往滞后于系统标称版本，实际行为更接近旧版 Chrome。这种差异没法靠表格看出，必须真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
