为何CSS中"field"会被判定为有效的颜色名称？

为什么CSS.supports('color', 'field')返回true？ #

这是因为field属于CSS的系统颜色——这类颜色是浏览器对接操作系统UI主题定义的特殊颜色值，虽然不在标准命名颜色列表里，但属于合法的CSS颜色取值。

早期CSS规范引入系统颜色是为了让网页元素和系统UI风格统一，比如field对应表单输入框的背景色，这类属性现在虽然被CSS变量、prefers-color-scheme等现代方案替代，但浏览器为了兼容性仍保留支持，所以CSS.supports会判定它是合法颜色。

类似的系统颜色还有哪些？ #

常见的系统颜色包括：

• buttonface：按钮表面颜色
• buttontext：按钮文本颜色
• graytext：禁用状态的文本灰色
• highlight：选中区域的背景色
• highlighttext：选中区域的文本颜色
• menu：菜单背景色
• menutext：菜单文本颜色
• scrollbar：滚动条颜色
• window：窗口背景色
• windowtext：窗口文本颜色

这些值都不在标准命名颜色列表中，但浏览器会识别为合法颜色，用CSS.supports判断时会返回true。

如何只校验标准命名颜色？ #

如果你的需求是仅识别标准命名颜色，可以在CSS.supports返回true后，额外加一步校验：把输入值和预定义的标准命名颜色数组比对，确认它属于标准列表内的颜色，以此排除系统颜色的干扰。

内容的提问来源于stack exchange，提问作者Jos de Jong