html5源代码发行支持哪些浏览器_兼容性检查与适配方法【说明】_技术教程

HTML5各特性浏览器支持差异大，须按具体API或标签查caniuse.com；应采用特性检测而非UA判断，结合渐进增强与polyfill降级；构建时配置target和autoprefixer，真机测试不可少。

HTML5 不是“一个东西”，而是几十个独立功能的集合（比如、localStorage、fetch()、IntersectionObserver），每个浏览器对它们的支持程度差异很大。不能笼统说“HTML5 支持与否”，必须查具体特性。

判断依据不是“是否为 HTML5 文档类型”，而是目标浏览器是否实现了你要用的那个 API 或元素。例如：在 IE 完全不支持，但从 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，要同时 catch SecurityError
某些 Android WebView（尤其国内定制版）不支持 Intl.DateTimeFormat 的完整选项，formatToParts() 可能返回空数组