新版css加载失败时浏览器不会自动回退到上一版，而是静默丢弃并沿用缓存中任意旧版本；需用js监听link的onerror事件动态插入备用link实现主动fallback。
新版CSS加载失败时，浏览器还在用旧版吗？
不，默认不会自动回退。浏览器遇到 link 标签加载失败（比如 404、500、网络中断），会静默丢弃该样式表，页面直接按无样式或已缓存的旧版渲染——但这个“旧版”不是你期望的“上一版 CSS”，而是上次成功加载并被缓存的任意版本，可能早已过期。
怎么让页面在新版CSS加载失败时主动 fallback 到指定旧版？
核心思路：不让浏览器自己决定是否应用新样式，而是先阻塞渲染，等确认新版可用再启用；否则立刻加载备用路径。纯 CSS 无法实现判断，必须配合 JS。
- 用
link的onerror事件捕获加载失败 - 失败后动态插入指向旧版 CSS 的
link标签（路径需预先约定，如/css/app.v2.css失败则加载/css/app.v1.css） - 注意：不能在
head里写两个link并依赖disabled切换——disabled不触发重排，且无法感知加载结果
示例：
<link rel="stylesheet" href="/css/app.v2.css" id="main-css">
<script>
document.getElementById('main-css').onerror = function() {
const fallback = document.createElement('link');
fallback.rel = 'stylesheet';
fallback.href = '/css/app.v1.css';
document.head.appendChild(fallback);
};
</script>
为什么不能只靠 HTTP 缓存头或 Service Worker 做回退？
HTTP 缓存（如 Cache-Control）控制的是“要不要发请求”，不是“请求失败了怎么办”；Service Worker 虽能拦截请求，但需要提前注册、激活，且首次访问时 SW 还未生效，此时新版加载失败就彻底没 fallback。
立即学习“前端免费学习笔记（深入）”；
- 首屏加载阶段，SW 可能尚未控制页面，
fetch拦截不生效 - 缓存策略再严谨，也解决不了 CDN 返回 5xx 或源站宕机这类运行时故障
- SW 的
cache.match()查的是本地缓存，未必有你想要的“上一版”，尤其当用户清过缓存
容易被忽略的细节：CSS 加载失败 ≠ 样式未生效
常见误判：看到页面乱了，就以为是 CSS 加载失败。其实更可能是：
- CSS 文件本身语法错误（如漏括号、非法字符），浏览器解析失败，
onerror不触发 - 相对路径写错（如
./styles/main.css在子路径页变成/admin/./styles/main.css），导致 404 但开发者工具里没注意 Network 面板的请求地址 - 新版 CSS 中用了旧浏览器不支持的特性（如
color-mix()、has()），样式被忽略，但加载状态仍是 200
真正可靠的判断方式：检查 Network 面板中 CSS 请求的状态码和响应体，再配合 DevTools 的 Styles 面板看规则是否被划掉或标为 “invalid”。
