color在打印样式中不生效，主要是浏览器默认启用黑白/灰度打印模式，需在打印设置中手动关闭“黑白打印”并开启“背景图形”；CSS仅定义意图，实际效果取决于打印对话框配置。

打印样式里 color 不生效？先确认浏览器是否启用彩色打印

绝大多数情况下，@media print 中设置的 color 在实际打印时被忽略，不是 CSS 写错了，而是浏览器或打印机默认启用了「灰度打印」或「节约墨水」模式。Chrome、Edge 默认勾选「仅打印黑白」，Firefox 也倾向禁用颜色输出——这属于系统级限制，CSS 无法绕过。

• 必须在浏览器打印预览界面手动取消勾选 “黑白打印” 或 “Grayscale”
• 部分企业环境策略可能强制灰度，此时前端无解
• 即使 CSS 写了 color: #ff6b6b;，若打印设置为灰度，最终输出仍是中性灰

print 媒体查询中 color 能起作用的典型场景

只有当设备明确支持并启用彩色输出时，color 才会参与渲染。常见有效场景包括：PDF 导出（如 Chrome “另存为 PDF”）、部分支持 CSS 颜色的专用打印服务、或用户主动开启彩色打印的家用喷墨打印机。

• @media print { body { color: #2c3e50; } } 在 PDF 导出中通常能保留
• 链接文字用 a:link { color: #3498db; text-decoration: underline; } 可提升可读性（但需搭配 text-decoration，否则纯色链接在灰度下不可见）
• 避免依赖 color 传递关键信息，比如用红色表示错误——应同步加图标或文字标识

更可靠的打印配色替代方案：background-color + print-specific classes

比起依赖 color，用 background-color 搭配高对比边框或文字加粗，对打印识别更友好。但注意：多数浏览器默认禁用背景图形打印，必须显式开启。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

• 在打印设置中勾选 “背景图形”（Chrome/Edge 中叫 “Background graphics”）
• 配合类名控制，避免全局污染：

  @media print {
    .print-color-warning {
      background-color: #fdf2f2;
      color: #c0392b;
      border-left: 4px solid #e74c3c;
      padding: 8px 12px;
    }
  }

• 纯色块比渐变/透明更稳妥，rgba() 和 hsla() 在打印中常退化为黑/白/灰

检查 color 是否真的被应用：用 DevTools 强制触发 print 媒体

开发阶段不能只靠肉眼判断，要验证 CSS 是否进入生效流程。Chrome 和 Edge 支持在 DevTools 的 Rendering 面板中强制启用 @media print 模式。

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

• 打开 DevTools → ⋯ → More Tools → Rendering
• 勾选 Emulate CSS media type，下拉选择 print
• 此时页面立即按打印样式重绘，可直接 inspect 元素看 color 计算值是否符合预期
• 注意：该模式不模拟打印机驱动行为（如灰度转换），仅验证 CSS 层是否命中

实际打印效果受软硬双层控制：CSS 定义「想怎么印」，而浏览器打印对话框决定「允许怎么印」。漏掉后者设置，前面所有 color 都是静默失效。