17370845950

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

HTML5 标签和 API 在哪些浏览器里能用

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() 可能返回空数组

真机测试不可省：iOS 微信内置浏览器用的是 UIWebView（iOS12 以下）或旧版 WKWebView，很多新 API 表现和 Safari 不同；部分国产安卓浏览器禁用 document.write 或拦截 eval，连带影响某些老库。