HTML5各特性浏览器支持差异大，须按具体API或标签查caniuse.com；应采用特性检测而非UA判断，结合渐进增强与polyfill降级；构建时配置target和autoprefixer，真机测试不可少。
HTML5 标签和 API 在哪些浏览器里能用
HTML5 不是“一个东西”，而是几十个独立功能的集合（比如 、localStorage、fetch()、IntersectionObserver），每个浏览器对它们的支持程度差异很大。不能笼统说“HTML5 支持与否”，必须查具体特性。
判断依据不是“是否为 HTML5 文档类型”，而是目标浏览器是否实现了你要用的那个 API 或元素。例如： 从 IE9 开始支持；fetch() 在 Safari 10.1+ 才可用，而 XMLHttpRequest 几乎全兼容。
- 查最新支持状态，直接访问 caniuse.com，搜函数名或标签名（如
flexbox、dialog） - 不要依赖 UA 字符串判断浏览器版本，它容易被伪造且无法反映真实能力
- 企业内网常见旧版 IE（如 IE11），需单独确认：IE11 支持
Promise但不支持async/await，也不支持Array.prototype.includes()
遇到不支持时怎么降级或补救
核心原则是“渐进增强”：先保证基础内容可访问，再叠加高级功能。避免用 if (isIE) { ... } 这类 UA 检测，改用特性检测（feature detection）。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
} else {
// 降级方案：用 localStorage 缓存关键数据，或跳过离线能力
}
- 用
typeof window.Promise !== 'undefined'判断 Promise 是否可用，而不是查 Chrome 版本号 - 对 CSS 新特性（如
gap、aspect-ratio），用@supports (display: grid)包裹，避免全盘失效 - 第三方 polyfill 要按需加载：只在缺失时动态
import()，比如core-js/stable/array/includes补Array.includes
构建阶段如何自动处理兼容性问题
现代构建工具（Vite、Webpack、Rollup）本身不解决运行时兼容性，但可通过插件链提前转换或注入逻辑。
立即学习“前端免费学习笔记（深入）”；
- Vite 默认使用 esbuild 做转译，不处理低版本 JS 语法 —— 需手动配置
build.target（如'chrome87'）或引入@vitejs/plugin-legacy输出双包 - Webpack + Babel：确保
.babelrc中targets与实际支持范围一致，例如{"chrome": "80", "safari": "14"} - CSS 方面，PostCSS 配合
autoprefixer可自动加前缀，但注意它不处理新属性缺失（如contain），这类仍需 JS 降级或视觉妥协
本地调试时最容易忽略的兼容性陷阱
开发环境常因本地服务器、HTTP/2、CORS 设置等掩盖真实问题，上线后才暴露。
- 本地用
file://协议打开 HTML，fetch()和localStorage会受限或报错，必须走http://localhost - Safari 私密模式下
localStorage直接抛异常，不能只捕获QuotaExceededError，要同时 catchSecurityError - 某些 Android WebView（尤其国内定制版）不支持
Intl.DateTimeFormat的完整选项，formatToParts()可能返回空数组
真机测试不可省：iOS 微信内置浏览器用的是 UIWebView（iOS12 以下）或旧版 WKWebView，很多新 API 表现和 Safari 不同；部分国产安卓浏览器禁用 document.write 或拦截 eval，连带影响某些老库。
