不存在按浏览器兼容性引入CSS3样式文件的做法——真正起作用的是CSS规则是否被浏览器支持，而非文件名或引入方式；应依靠autoprefixer自动添加前缀、caniuse数据验证及降级方案。
不存在“按浏览器兼容性引入 CSS3 样式文件”这回事——CSS 文件没有版本标签，浏览器也不认这个；真正起作用的是你写的规则是否被当前浏览器支持，而不是你用什么文件名或怎么引入。
多个 <link> 标签不是按版本加载，而是按顺序层叠
你写 5 个 <link rel="stylesheet" href="a.css">，浏览器就并发下载它们（HTTP/2 下更高效），不区分哪个是 CSS2、哪个是 CSS3。后加载的文件里同名选择器会覆盖前面的，仅此而已。
- 不要写
<link href="base.css,theme.css">—— 浏览器根本不会解析逗号分隔路径 - 不要把所有样式塞进一个大文件再靠 JS 检测浏览器去动态
insertRule—— 渲染阻塞风险高，且无法利用 CSS 缓存 - 避免在
<style>块里写@import url("xxx.css")—— 现代浏览器把它当低优先级资源，可能等到 DOM 就绪后才加载，导致 FOUC
@import 在 CSS 文件里是串行加载，不是兼容性开关
有人以为用 @import 能“只让 Chrome 加载 flex 布局”，其实完全不能。它只是语法上允许导入，但执行时必须等前一个文件下载+解析完，才发起下一个请求。三层 @import 可能拖慢首屏 300ms+。
- CSS 文件里的
@import不支持media条件判断（而<link>支持） - 构建工具（如 Sass）中用
@import是为了模块组织，最终必须展开为单文件或转成多个<link> - 真要按特性分发，得靠构建时生成多套 CSS + 服务端 UA 判断，成本远高于直接写兼容规则
真正影响兼容性的不是引入方式，而是规则写法本身
比如 display: flex 在 IE10 需要 display: -ms-flexbox，在 Safari 8 需要 display: -webkit-flex。这些前缀不是靠不同文件加载出来的，而是同一行规则里并列书写，或由 autoprefixer 自动注入。
立即学习“前端免费学习笔记（深入）”；
- 手动加前缀容易漏，且维护成本高；推荐用 PostCSS +
autoprefixer，配置browsers: ["last 2 versions", ">1%"] - 像
transform: rotate(45deg)这种属性，即使写了所有前缀，IE9 及以下仍不支持 —— 这时候该考虑降级方案（如用filter: progid:DXImageTransform.Microsoft.Matrix），而不是换引入方式 - 某些新特性（如
aspect-ratio、container queries）连现代浏览器都需 opt-in（@container规则需开启实验 flag），跟引入路径毫无关系
最常被忽略的一点：所谓“兼容性引入”，本质是混淆了「资源加载机制」和「特性支持检测」。前者由 HTML 和 HTTP 决定，后者得靠构建时处理或运行时特性检测（如 if ("flexWrap" in document.documentElement.style)）。把精力花在拆文件、换 @import 上，不如确认 caniuse.com 数据 + 配好 autoprefixer + 写好降级 fallback。
