Safari 动态插入 link 样式不生效是因解析延迟或作用域隔离，需等待 link.sheet.cssRules 有值、触发重排（如 getComputedStyle）、确保 href 唯一且用 createElement 创建。

link 标签动态插入后样式不生效，不是加载失败，而是 Safari 对异步注入的 CSS 有解析延迟或作用域隔离行为——尤其在 iOS 16.4+ 和 macOS Sonoma 后更明显。直接 appendChild 不够，必须触发重排或等待解析完成。

动态创建 link 后样式没反应，怎么办？

常见现象：JS 创建 link 并插入 document.head，控制台能看到 DOM 节点，Network 面板里请求返回 200，但样式就是不应用。

• 不要只靠 link.onload —— Safari 的 onload 触发时机不可靠，有时在 CSSOM 解析前就执行了
• 必须等 link.sheet.cssRules 有值（哪怕为空数组），才代表浏览器已解析该样式表；可轮询检查：if (link.sheet && link.sheet.cssRules.length >= 0)
• 插入后立即读取任意布局属性（如 getComputedStyle(document.body).margin）能强制触发重排，让新样式参与计算
• 避免在 DOMContentLoaded 前插入 —— iOS Safari 对早期注入的 link 可能跳过 CSSOM 构建

为什么 insertAdjacentHTML 加 link 更容易失效？

用字符串拼接方式插入 <link rel="stylesheet" href="a.css">，Safari 会把它当作文本节点处理，不触发资源加载，也不进 CSSOM。

• 必须用 document.createElement('link') 显式创建元素，再设 rel、href、type 属性
• type="text/css" 在现代 Safari 中非必需，但加上能减少旧版本兼容风险
• 插入前确保 href 是完整路径（相对路径易被解析为相对于当前 JS 执行位置，而非 HTML 文档位置）
• 如果从 CDN 加载，确认响应头含 Content-Type: text/css，否则 Safari 直接忽略

动态 CSS 在 iOS 上被缓存却没更新？

不是“不生效”，是 Safari 把旧版本缓存在内存里，连带 link 元素一起复用 —— 即使你删掉旧 link、插入新 link，它仍沿用旧解析结果。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 给 href 加时间戳参数最有效：href="style.css?v=" + Date.now()，注意不能只加在末尾，要保证 URL 全新
• 避免用 Math.random() —— iOS Safari 有时会把小数点后数字截断，导致重复 URL
• 若用构建工具（如 Vite/Webpack），启用 cacheBusting 或哈希文件名，比手动加参更稳
• 临时调试时，可在插入前先移除同 href 的旧 link：document.querySelector(`link[href*="style.css"]`)?.remove()

React/Vue 项目里动态引入 CSS 总失败？

框架的 hydration 或 SSR 渲染流程会干扰 link 注入时机，iOS Safari 对此更敏感。

立即学习“前端免费学习笔记（深入）”；

• 不要在组件 useEffect 或 mounted 里直接 appendChild —— 此时可能 DOM 还未挂载完成，或框架正批量 patch
• 改用 requestIdleCallback 或 setTimeout(..., 0) 推迟到下一个宏任务，确保 DOM 稳定
• Vue 3 中优先用 onMounted(() => { ... }) + nextTick 包裹；React 用 useLayoutEffect（不是 useEffect）
• SSR 场景下，服务端生成的 link 和客户端动态插入的冲突，需统一由客户端接管，服务端不输出该样式链接

真正卡住的点往往不是语法或路径，而是 Safari 对“何时承认这段 CSS 已就绪”的判定逻辑和你代码执行节奏之间的错位。只要等 sheet.cssRules、强制一次 layout 读取、确保 URL 唯一，90% 的“不生效”都能绕过去。