CanvasText 比 black 更可靠，因其是 CSS Color Level 4 定义的系统语义色，随主题、高对比度模式等动态变化；black 是固定值，不响应系统偏好，且 CanvasText 天然满足 WCAG 对比度要求。
color: CanvasText 为什么比 color: black 更可靠
因为 CanvasText 是 CSS Color Level 4 定义的系统语义色，它会随系统主题、高对比度模式、辅助功能设置动态变化；而 black 是固定值，不响应任何系统级偏好。Safari 和较新 Chromium（Chrome/Edge ≥115）已支持，Firefox 仍不支持该关键字，但会安全降级为 UA 默认文本色。
常见错误是直接写 color: -webkit-text——这是 WebKit 私有值，Chrome/Edge 已弃用，且无法在 Firefox 或旧版 Safari 中 fallback。
-
CanvasText表示“主文本色”，在浅色模式下通常是深灰（非纯黑），在深色模式下是浅灰（非纯白），天然满足 WCAG 对比度要求 -
Canvas表示“主背景色”，适合用于background-color，比硬写#ffffff或#121212更适配 OLED 屏、高对比度模式等边缘场景 - 不支持的浏览器会忽略该值，回退到用户代理样式表中的默认色（通常可接受），无需额外 JS 检测
:root 中定义 system-color 变量时怎么写 fallback
CSS 自定义属性不支持媒体查询内联条件，所以不能靠 --text: CanvasText 单独生效；必须配合 var() 的 fallback 机制，在不支持系统色的环境里兜底。
正确写法是：先在 :root 声明变量带字面量 fallback，再用媒体查询覆盖变量值本身（而非只改 fallback）：
立即学习“前端免费学习笔记（深入）”；
:root {
--text: #333; /* fallback for old browsers */
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text: CanvasText;
--bg: Canvas;
}
}
body {
color: var(--text, #333);
background: var(--bg, #fff);
}注意：var(--text, #333) 中的 #333 是最终 fallback，不是初始值；真正起作用的是 :root 里声明的 --text 值本身。
color-scheme: light dark 和 system-color 是什么关系
color-scheme 是控制浏览器如何渲染原生控件（如 <input>、<select>、滚动条）的属性，它本身不改变你的 CSS 颜色声明；CanvasText 等系统色则用于自定义样式中显式引用系统语义色。二者互补，不是替代关系。
典型组合用法：
- 在
:root上设color-scheme: light dark，让表单控件自动适配 - 用
CanvasText/Canvas设置文字和背景，确保自定义区域与原生控件视觉一致 - 若只设
color-scheme而不用系统色，自定义内容仍可能是白底黑字，在深色系统下突兀
哪些 system-color 关键字目前可用且相对稳妥
不是所有 CSS Level 4 系统色都已落地。截至 2026 年 4 月，真正跨浏览器（Chromium + Safari）可用、且有明确语义的只有这几个：
-
Canvas：主背景色（对应系统窗口背景） -
CanvasText：主文本色（对应系统标准文本） -
ButtonFace：按钮表面色（适合background-color于自定义按钮） -
ButtonText：按钮文本色（常与ButtonFace搭配使用）
GrayText、Highlight 等虽在规范中，但实际渲染行为不一致，尤其在高对比度模式下易失效，不建议在生产环境直接使用。
最易被忽略的一点：这些关键字只在支持它们的浏览器中“活”起来；你写的 color: CanvasText 在 Firefox 当前版本里就是无效声明，不会报错，但也不会生效——得靠 var() fallback 或 @supports 做渐进增强，不能假设它一定存在。
