想放心用 HTML5？先搞懂「浏览器支持」这件小事

一句话总结：HTML5 不是能不能用，而是怎么用、怎么回退、怎么测。下面带你从「看数据」到「写代码」全流程走一遍，保证不踩空。

1. 先给颗定心丸：主流功能其实早普及了

数据来源：Can I use（2024 Q2）
→ 结论：除了 IE 早退休，现代浏览器基本「开箱即用」。

2. 兼容性三步法：查 → 回退 → 测

① 查：秒懂「Can I use」

1. 打开 caniuse.com
2. 输入关键字，例如 webm → 立刻看到绿块/红块
3. 点「Usage relative」可知全球覆盖率，绿 > 92% 可大胆用

② 回退：写“双线代码”

例 1：新标签 + CSS 补丁

/* 旧浏览器不认识 <header>，但样式可生效 */
header, nav, main { display: block; }

例 2：视频多格式兜底

<video controls>
  <source src="trailer.mp4" type="video/mp4">
  <source src="trailer.webm" type="video/webm">
  <!-- 最后给 Flash 或其他插件留后路 -->
  <p>您的浏览器不支持，<a href="trailer.mp4">点击下载</a></p>
</video>

例 3：API 特性检测

if ('localStorage' in window) {
  // 现代分支
  localStorage.setItem('theme', 'dark');
} else {
  // 上古分支
  document.cookie = 'theme=dark';
}

③ 测：三条命令跑一圈

1. 本地多核
   Chrome DevTools → Settings → Devices → 加 iPhone/安卓模拟器
2. 真实机
   用 BrowserStack（Web 版免费额度）或公司真机柜
3. 自动化
   npx playwright test --project=webkit firefox chromium
   一次写完，三引擎一起跑截图

3. 那些「看起来很美」的 API 才要小心

4. IE 已死，但“假死”怎么办？

• 政府/银行内网仍跑 Win7 + IE11？
  → 用 polyfill.io 按需打补丁：

<!-- 只给老浏览器加载， saves 90% 流量 -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,es6"></script>

• 表格兼容写法（条件注释只剩 IE11 认识）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

5. 快问快答（面试/评审常考）

Q1. 公司项目要支持到 Win7，HTML5 还能用吗？
→ 用，但把「新标签 + 本地存储」当默认，flex/grid 可上；别碰 WebRTC、Service Worker。

Q2. 如何一句话判断浏览器是否支持 <video> 自动播放？

const canAutoplay = Boolean(document.createElement('video').play);

→ 返回 Promise 即支持，catch 即被拦截。

Q3. 特性检测 vs 浏览器嗅探（UA）哪个好？
→ 永远选特性检测；UA 字符串可被伪造，且维护成本高。

6. 实战口诀（背下来走天下）

1. 先查 Can I use，绿得发慌再用
2. 新标签就写，旧浏览器加 CSS 补丁
3. 多媒体多格式，API 先 in 判断
4. 真机 + 模拟器双跑，别信「我电脑正常」
5. IE 特例交给 polyfill，代码里不写 if IE

HTML5 浏览器支持早已不是“能不能用”，而是“怎么优雅降级”。
记住：检测 > 回退 > 测试，就能把“兼容”从坑点变成基本功。