link标签引入CSS基本不受浏览器兼容性影响，是IE6+及所有现代浏览器唯一一致支持的外部CSS引入方式，不依赖JS、解析优先级高，但preload+onload切换、media高级查询、crossorigin等特性存在版本兼容限制。
link 标签引入 CSS 是否受浏览器兼容性影响
基本不受影响。<link rel="stylesheet"> 是所有现代浏览器（包括 IE6+）都支持的标准方式，也是唯一被所有浏览器一致认可的外部 CSS 引入方法。它不依赖 JavaScript，解析优先级高，且支持 media、disabled、onload 等属性控制行为。
需要注意的兼容细节：
-
rel="preload"+as="style"配合onload动态切换rel="stylesheet"的写法，在 IE 中完全不生效，需降级为document.write或appendChild注入<link> - IE8 及更早版本不支持
media="print and (resolution: 2dppx)"这类带逻辑运算和高阶媒体特性查询的写法，但media="screen"或media="print"始终可用 -
crossorigin属性在 IE 中被忽略，Chrome 12+、Firefox 39+、Safari 15.4+ 才开始支持 CORS 加载样式表（用于获取错误堆栈）
@import 在 CSS 文件中使用时的兼容性陷阱
@import 本身语法兼容性极好（CSS1 就有），但实际加载行为在不同浏览器中差异显著——尤其影响渲染阻塞和并行下载能力。
关键问题点：
立即学习“前端免费学习笔记（深入）”；
- 在
<style></style>标签或外部 CSS 中使用@import，会导致该 CSS 文件必须等被导入资源下载并解析完后，才继续解析后续规则；而<link>是并行加载的 - IE6–IE8 不支持
@import url("a.css") screen and (min-width: 768px)"这种带媒体查询的写法，会直接忽略整条规则 - 移动端 Safari（iOS 12.2 之前）对嵌套
@import（A.css @import B.css，B.css 再 @import C.css）存在深度限制，超过 3 层可能中断加载 -
@import无法通过 JavaScript 动态控制启用/禁用，也不触发load事件，调试困难
内联 style 和 style 标签的兼容性表现
<style></style> 标签内容和 属性属于 CSS 解析范畴，其兼容性取决于所写 CSS 规则本身，而非引入方式。但有几点容易被忽略：
- IE8 不支持
calc()表达式，哪怕写在<style></style>里也会被整个忽略（不是报错，是静默跳过） -
<style></style>标签的type属性在 HTML5 中已废弃，默认就是text/css；但若显式写成type="text/less"或type="module"，只有对应预处理器或现代模块系统支持的环境才识别 - 服务端渲染场景下，若
<style></style>标签内容含未转义的字符串（如注释里写了“end style”），会导致标签提前闭合，IE 和旧版 Edge 更敏感 -
属性中不能使用 CSS 变量（--color: red），也不能写伪类、媒体查询等非内联支持的语法
HTTP/2 和 preload 对 CSS 加载方式的影响
这不是传统意义上的“兼容性”，但会影响你在不同浏览器中是否能安全使用某些优化手段：
-
<link rel="preload" as="style" href="main.css">+onload切换rel的模式，在 Chrome 50+、Firefox 46+、Edge 17+、Safari 11.1+ 可用；但 Safari 11.0 及更早版本会发起两次请求（preload + 正常 link） - HTTP/2 Server Push 曾被用于预推 CSS，但已被主流浏览器弃用（Chrome 96+、Firefox 90+ 完全移除支持），现在仅靠
preload维持主动推送语义 - 部分国产双核浏览器（如 QQ 浏览器 10.7、360 极速 13.5）在 IE 内核模式下会忽略
preload，但在 Chromium 内核下正常；需用document.documentMode或 UA 特征检测做 fallback
真正要小心的不是“能不能加”，而是“加了之后是否真按预期执行”。很多看似无害的引入方式组合（比如 @import 套 preload），在 Safari 或旧 Edge 上会产生不可见的加载延迟或样式闪烁。
