stylelint 不报 color-mix() 兼容性错误，因其仅校验语法合法性而不查浏览器支持表；需结合 @supports 正确检测、fallback 前置及工程化拦截（如 stylelint-declaration-strict-value）保障兼容性。
Stylelint 本身不检测 color-mix()、oklch()、color-contrast() 这类现代颜色函数是否兼容，它只校验语法合法性；真正在意浏览器支持与否，得靠 @supports + 手动配置 + 工程化拦截三者配合。
为什么 Stylelint 不报 color-mix() 兼容性错误
Stylelint 解析 CSS 时把 color-mix(in srgb, red, blue) 当作合法函数调用——只要括号匹配、逗号分隔、语法没崩，就放行。它不查浏览器支持表，也不连 caniuse.com。所以即使你在 Safari 15 里写了 color-mix()，Stylelint 也完全沉默。
-
color-mix()在 Safari 16.4+ 才启用，Chrome 111+ 支持但默认混合空间不一致，Firefox 112+ 需手动开启 flag - Stylelint 插件如
stylelint-color-function-notation只管写法（比如是否用了rgb()而非hsl()），不关函数可用性的事 - 想让它“拦住”新函数，只能靠自定义规则或构建时脚本做字符串扫描，但容易误伤（比如注释里写了
color-mix）
用 @supports 检测必须写对声明格式
检测不是写 @supports (color-mix: ...)，而是检测色彩空间是否被识别。错写就等于白写，旧浏览器直接跳过整块规则。
- ✅ 正确：
@supports (color: oklch(0% 0 0))或@supports (color: color-mix(in srgb, red, blue)) - ❌ 错误：
@supports (color-mix: oklch(0% 0 0) 50%, red)—— Safari 16.3 及更早不认识color-mix这个特性名，整条@supports块被忽略 - ❌ 错误：
@supports (color: oklab(0 0 0))—— 主流浏览器当前仍返回false，检测永远失败 - ⚠️ 注意：
color-contrast()的检测必须带完整参数：@supports (color: color-contrast(#000 vs #fff to WCAG20/AA))，缺to或写错合规等级都会失效
fallback 颜色必须放在 @supports 外且顺序在前
CSS 是从上到下解析的。如果 fallback 写在 @supports 块后面，某些旧版 Chromium（如 Chrome 111 之前）会忽略它，导致元素彻底没背景色或文字色。
- ✅ 安全写法：
button {<br> background-color: #4a6fa5;<br> @supports (color: oklch(0% 0 0)) {<br> background-color: color-mix(in oklch, #4a6fa5 70%, white 30%);<br> }<br>} - ❌ 危险写法：
button {<br> @supports (color: oklch(0% 0 0)) {<br> background-color: color-mix(in oklch, #4a6fa5 70%, white 30%);<br> }<br> background-color: #4a6fa5;<br>}—— 部分浏览器可能不读取后面的 fallback - fallback 值只能是广泛支持格式：
#rrggbb、rgb()、hsl()、命名色；不能用oklch()输出或color-mix()结果作 fallback
工程化拦截：用 stylelint-declaration-strict-value 禁用硬编码
虽然它不直接报“用了 color-mix()”，但能强制所有颜色属性只允许变量，间接堵死随意写新函数的路径。
- 配置示例中匹配
/color/、/background/等属性，值只接受var(--primary)，拒绝#fff、rgb(0,0,0)、oklch(60% 0.2 240) - 这样团队成员就不能随手写
color: oklch(60% 0.2 240)，必须先定义--text-primary: oklch(60% 0.2 240)，再在@supports块里用var(--text-primary) - 搭配
stylelint-config-standard和color-no-invalid-hex，能同时防错写 HEX、防未命名硬编码、防语法崩坏
真正难的不是写对一个 @supports，而是让整个样式系统在 Chrome、Safari、Firefox 里都渲染出可预期的对比度和明度——color-mix() 的空间一致性、color-contrast() 的 LAB 输入要求、oklch() 的 LCH 明度通道控制，这些细节一旦漏掉，fallback 就只是心理安慰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
