查css/html/js兼容性首选caniuse.com，注意正确属性名（如css-variables、sticky）；部分支持需看notes；ie需手动显示；js api建议结合mdn.io查细节；本地验证需真机或老版本浏览器。
查某个 CSS 属性在各浏览器的兼容情况
直接去 caniuse.com 搜属性名，比如 gap、aspect-ratio、:has()。它会显示桌面/移动端各版本的支持状态，绿色是支持，红色是不支持，黄色是部分支持（常带小字说明限制条件）。
注意别搜错名：CSS 自定义属性叫 --my-var，但 caniuse 里搜的是 css-variables；position: sticky 要搜 sticky，不是 position-sticky。
- 遇到“部分支持”，点开详情看「Notes」——比如
flex-wrap在 Safari 14.1+ 才支持wrap-reverse，旧版只认wrap - IE 的支持状态已归档，
caniuse默认不显示，需手动勾选「Show all browsers」才看得到 - 某些新特性（如
@container）标注「Behind flag」，意味着得手动开启实验性功能才能用
查 HTML5 新标签是否能用
HTML5 标签本身（如 article、dialog、details）基本全平台支持，但行为差异大。重点不是“能不能写”，而是“有没有默认样式”和“是否可访问”。
例如：dialog 在 Chrome/Firefox 支持 showModal()，但 Safari 直到 16.4 才支持，且不支持 close() 的事件冒泡；details 的箭头样式各浏览器不一致，没法用纯 CSS 统一覆盖。
立即学习“前端免费学习笔记（深入）”；
-
dialog必须配合 JavaScript 使用，不能只靠 HTML；没 JS 时建议降级为div+ ARIA 属性 -
picture+source的响应式图片，在 IE 完全不支持，需用picturefill或服务端适配 - 所有语义化标签（
nav、main等）对 SEO 影响极小，但影响屏幕阅读器识别逻辑，别为了“兼容”而退回到div
查某个 JavaScript API 的浏览器支持（如 fetch、IntersectionObserver）
同样用 caniuse.com，搜 API 名（如 fetch），但它只反映“是否存在”，不反映“是否可靠”。比如 fetch 在 Safari 10.1+ 支持，但早期版本不支持 AbortController，导致超时控制失效。
更准的方式是查 mdn.io（Mozilla Developer Network），搜 mdn.io/fetch，它会标出每个参数、每个选项的支持情况，比如 keepalive 选项仅在 Chrome 和 Firefox 支持，Safari 不认。
-
IntersectionObserver在 iOS Safari 12.2+ 才支持rootMargin百分比值，之前只接受 px 值 -
ResizeObserver在 Firefox 69+ 才支持观察 SVG 元素，旧版会静默失败 - 不要只看“是否支持”，要盯住你实际用到的参数组合——
new URL('a', 'b')和new URL('a', undefined)在 Safari 表现不同
本地快速验证兼容性（不依赖在线工具）
用浏览器开发者工具的「Rendering」或「Emulation」面板模拟旧版本（如 Chrome 的「Network Conditions」里设 User Agent），但这只能骗过 UA 字符串，不能还原真实引擎行为。
真正可靠的本地验证只有两种方式：装老版本浏览器（如 Safari Technology Preview、Firefox ESR），或用 browserslist 配合构建工具自动插入 polyfill。
-
browserslist配置写成> 0.5%, not dead时，autoprefixer会自动补-webkit-前缀，但不会处理Promise这类语法级特性 - 需要运行时 polyfill（如
core-js）时，必须显式 import，光靠构建配置不生效 - 移动端真机测试不可替代：iOS 微信内置浏览器用的是 UIWebView/WKWebView 旧内核，UA 里可能还写着 “Safari/604.1”，但实际能力比 Safari 11 还弱
兼容性不是查一次就完事的事。同一属性在不同上下文（flex 容器里 vs grid 容器里）、不同设备像素比、甚至不同系统语言设置下，都可能出现边缘 case。最省事的做法，是把 caniuse 当起点，而不是终点。
