link标签的media="print"在离线环境下能生效，但前提是css文件已被缓存或预加载；否则请求失败，打印回退默认样式；可靠方案是内联关键规则、预加载+缓存或service worker拦截。
link标签的media="print"在离线环境下是否生效
能生效，但前提是CSS文件本身可被浏览器缓存或已预加载——media="print"只是控制样式何时应用，不参与资源加载逻辑。离线时若CSS未提前缓存，浏览器会静默失败，打印仍用默认样式。
-
<link rel="stylesheet" href="print.css" media="print">在页面加载时仍会发起HTTP请求，离线状态下该请求直接失败（开发者工具Network面板显示net::ERR_INTERNET_DISCONNECTED） - Chrome、Edge等现代浏览器对
media="print"样式表的加载行为与media="all"一致，没有特殊缓存豁免 - Firefox稍有不同：若
print.css此前已被同域名其他页面加载过且未过期，可能复用缓存；但不可依赖
让打印样式真正离线可用的三个实操方式
核心思路是把打印样式“带进来”，而不是“等它来”。优先级从高到低：
- 内联关键打印规则：
<style media="print">@page { margin: 1cm; } body { font-size: 12pt; }</style>—— 适合规则少、变动少的场景，完全规避网络请求 - 预加载+缓存策略：在在线时用
<link rel="preload" href="print.css" as="style" onload="this.rel='stylesheet'">，并确保print.css响应头含Cache-Control: public, max-age=31536000 - Service Worker拦截：注册SW后，在
fetch事件中匹配request.destination === 'style'且URL含print，返回cache.match()结果 —— 最可靠，但需HTTPS环境
media属性值写错导致打印样式不生效的常见情况
media值大小写敏感、空格敏感，且部分旧浏览器不支持复合值。以下写法均无效：
-
media="PRINT"（全大写）→ 大多数浏览器忽略 -
media="print and (color)"→ 现代浏览器支持，但离线时若设备不满足(color)条件，样式不会启用 -
media="print, screen"→ 这是“或”关系，会同时影响屏幕显示，违背初衷 - 遗漏引号：
media=print→ HTML解析为属性名media=print，实际值为空字符串，等效于media="all"
打印样式表里容易被忽略的兼容性细节
即使CSS文件成功加载，部分规则在打印预览中行为异常：
-
display: none在某些PDF生成工具（如wkhtmltopdf）中可能被忽略，改用@media print { .no-print { visibility: hidden; } }更稳妥 -
background-color默认不打印（用户浏览器设置决定），必须显式声明-webkit-print-color-adjust: exact;或print-color-adjust: exact; -
@page规则中的size（如A4）在Firefox中需写成size: A4 portrait，仅size: A4可能被忽略 - 相对单位如
em、rem在打印时计算基准可能与屏幕不同，建议打印样式中统一用pt或cm
离线打印的关键不在media属性本身，而在CSS资源是否真正在本地可得——这个前提没解决，再精细的打印规则也出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
