如何实现CDN CSS加载失败（404）时自动加载本地CSS文件？

首先明确：纯CSS代码无法实现检测CDN资源加载失败并自动切换到本地文件，因为CSS本身没有内置的资源请求状态检测与错误处理机制，@import语句加载失败时，浏览器只会静默忽略该请求，不会触发任何可被CSS捕获的逻辑。

以下是两种可行的替代方案：

方案1：HTML <link> 结合 onerror 事件（推荐） #

这是最常用且可靠的方法，利用HTML标签的错误回调事件实现 fallback：

<link rel="stylesheet" href="https://external-website.com/style.css" onerror="this.onerror=null; this.href='/local/style.css';">

• 原理：当CDN资源请求返回404或加载失败时，触发onerror事件，将当前<link>的资源路径替换为本地CSS文件；
• 额外处理：this.onerror=null是为了避免本地文件也加载失败时陷入循环触发错误事件。

方案2：CSS冗余导入（不推荐） #

如果必须仅用CSS代码，可以采用“先导入CDN，再导入本地”的方式，但这不是真正的错误 fallback：

@import url('https://external-website.com/style.css');
@import url('/local/style.css');

• 问题：无论CDN资源是否加载成功，本地CSS都会被加载，可能导致样式冲突（若CDN样式优先级低于本地，会覆盖预期样式）；
• 适用场景：仅当本地CSS是CDN样式的完全子集，且不担心冗余加载时使用。

内容的提问来源于stack exchange，提问作者Life after Guest