CSS外部样式的媒体属性应用_media属性的按需加载

media属性只控制css是否启用，不阻止资源加载；真正按需加载需用javascript监听matchmedia()动态切换link的disabled状态。

media属性写在link标签里，但资源仍会加载

浏览器遇到 <link rel="stylesheet" href="print.css" media="print"> 时，不会阻止下载，只是延迟应用样式。这意味着即使用户从不打印，print.css 依然被请求、解析、甚至可能触发 FOUC 或阻塞渲染（尤其在旧版 safari 和部分 android webview 中）。

常见错误现象：Network 面板看到 print.css 明明没用却始终在加载；Lighthouse 报告提示“未使用的 CSS”；首屏渲染变慢。

• 真正按需加载必须靠 js 控制 link 的 disabled 状态或动态插入
• media 属性只影响“是否启用”，不控制“是否获取”
• 若 CSS 文件体积大、且仅用于特定场景（如 prefers-reduced-motion 或 screen and (min-width: 1200px)），仅靠 media 不足以优化

用 JavaScript 动态加载 media 匹配的 CSS

想实现真正的“按需加载”，得等媒体查询匹配后再拉取资源。核心是监听 matchMedia()，并在回调中操作 link 元素。

使用场景：响应式主题切换、暗色模式初始化、打印前预加载专用样式、无障碍偏好适配。

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

示例逻辑：

const mq = window.matchMedia('(max-width: 768px)'); const linkEl = document.querySelector('link[data-media-query="(max-width: 768px)"');  if (mq.matches) {   linkEl.disabled = false; } else {   linkEl.disabled = true; }  mq.addEventListener('change', (e) => {   linkEl.disabled = !e.matches; });

• link 标签需提前写入 HTML，但初始设为 disabled="true" 或用 data-* 属性标记用途
• 不要在 change 回调里重复 fetch() 或 appendChild() —— 资源已存在，只需开关启用状态
• matchMedia() 在 IE10+ 支持，但 IE 不支持 addEventListener，需用 addListener 回退

media 属性和 @import 的组合陷阱

在 CSS 文件内部用 @import url("theme.css") screen and (prefers-color-scheme: dark);，看起来更“语义化”，但实际风险更大。

问题本质：@import 是同步阻塞的，即使带 media，浏览器仍会下载并解析整个导入链，且无法被 preload 或预连接优化。

• 所有主流浏览器都忽略 @import 后面的 media 条件，直接加载（chrome 90+ 开始部分支持，但兼容性差）
• 调试时容易误判：Network 面板看到请求了，就以为“按需”生效了，其实不是
• 替代方案：把条件拆到 HTML 层，用多个 <link> + JS 控制 disabled，或改用 CSS 自定义属性 + JS 切换类名

preload 不能绕过 media 的加载限制

有人尝试加 <link rel="preload" as="style" href="mobile.css" media="screen and (max-width: 768px)">，期望只在匹配时预加载。结果发现：preload 会无视 media 属性，直接发起请求。

这是规范行为 —— rel="preload" 的 media 仅用于决定是否执行 as 类型解析，不控制是否发起网络请求。

• Chrome、firefox、Safari 均如此，无例外
• 若你真需要预加载某媒体查询下的资源，只能 JS 检测后手动 new Image().src = ... 或 fetch() 缓存，再注入 link
• 更稳妥的做法：把关键 CSS 内联，非关键的延迟加载，别依赖 media 做资源调度

事情说清了就结束。media 属性不是加载开关，它是样式开关 —— 这个边界很多人一开始就没划对。