最常见原因是语法或位置错误：漏括号、值非法（如true）、混用@supports，均导致“invalid css media query”；规则须置于css末尾或@layer base后；ios需三开关全开；color/background-color等硬编码值被系统强制替换为canvastext、buttonface等语义色，非bug。
为什么@media (forced-colors: active)写了却没反应
最常见原因是语法或位置错误——@media forced-colors: active（漏括号）、@media (forced-colors: true)（值非法）、或混在@supports (forced-colors: active)里，都会触发“Invalid CSS media query”，整块样式被浏览器忽略。它不是CSS特性，@supports检测永远返回false。
另一个硬性限制：规则必须放在src/styles.css末尾，或包裹在@layer base之后。Tailwind的@layer utilities或@layer components中写会被JIT编译器跳过。
- iOS需三开关全开：「增加对比度」+「降低透明度」+「使用灰度」，只开一个无效
- Android路径因厂商而异，要确认是系统级高对比度开关，而非仅字体放大
- DevTools的“Emulate forced colors”只模拟
prefers-contrast，真机验证不可少
color和background-color为什么写了也白写
一旦@media (forced-colors: active)生效，color: #000、background-color: #f0f0f0这类硬编码值全部被浏览器无视——这是规范行为，不是bug。!important无效，transparent可能映射为不可见色。
正确做法是改用系统语义色关键词：
- 正文文字 →
color: CanvasText - 按钮背景 →
background-color: ButtonFace - 按钮文字 →
color: ButtonText - 警告区背景 →
background-color: Highlight - 输入框边框 →
border: 2px solid CanvasText（不能只靠background-color撑结构）
box-shadow、border、SVG图标怎么处理
box-shadow、text-shadow、background-image、filter在forced-colors: active下直接清空或退化，不是盒模型失效，而是视觉锚点被系统抹掉。
表单控件和容器失去结构感，是因为你依赖的样式被清空了，不是box-sizing算错了：
- 输入框必须显式加边框：
input, select, textarea { border: 2px solid CanvasText; outline: 2px solid Highlight; } - 伪元素
::before/::after的background会被清空，改用content: ""+border构建形状 - SVG图标若需保留原色，加
forced-color-adjust: none，但必须配套color: HighlightText+background-color: InfoBackground，且Safari 17.4+还需color-scheme: light dark
forced-color-adjust: none到底能不能用
forced-color-adjust: none不是“关掉高对比度”，而是局部授权你控制颜色——但它单独写完全无效。它只是松开闸门，没给水。
必须同时满足三个条件才可能生效：
- 显式声明
color和background-color（不能是transparent或未设） - 对SVG元素额外加
color-scheme: light dark（Safari强制要求） - 禁用
box-shadow、filter、background-image（这些即使加none也无效）
它只适合语义明确的小元素，比如品牌SVG图标、状态徽章；别用在按钮、输入框、导航栏上——那是在绕过无障碍保障，而不是适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
