认识浏览器兼容性
浏览器兼容性指同一份 CSS/JS 在不同浏览器（Chrome、Safari、Firefox、旧 IE）上表现一致。现代内核已高度统一，主要差异集中在：新特性的支持时间、私有前缀、Safari 的实现细节。
查兼容性的标准工具是 caniuse.com：输入任意属性（如 aspect-ratio），一眼看到各浏览器从哪个版本开始支持、全球占有率多少。
- 先查后用：caniuse.com 看支持率再决定是否采纳新特性
- 常见雷区：flex gap（老 Safari 不支持）、gap 在 flex 中、:has() 选择器
- Autoprefixer / 构建工具自动补 -webkit- 等私有前缀
JS
// 运行时检测特性是否可用，是最可靠的兼容判断 console.log('支持 aspect-ratio:', CSS.supports('aspect-ratio', '16/9')); console.log('支持 flex gap:', CSS.supports('display', 'flex') && CSS.supports('gap', '1px')); console.log('支持 :has():', CSS.supports('selector(:has(a))')); // 检测 WebP 支持(async) createImageBitmap(new Blob()).catch(()=>{}); document.createElement('canvas').toDataURL('image/webp').startsWith('data:image/webp') ? console.log('支持 WebP') : console.log('不支持 WebP');
本节要点兼容策略：caniuse 先查 → 不支持就特性查询兜底 → 前缀交给构建工具补。
