只用transparent和CSS 2.1定义的16个基础色名（black、white、red、green、blue、yellow、cyan、magenta、gray/grey、lightgray、darkgray、silver、maroon、purple、olive、navy）才真正兼容IE6+及所有旧环境；orange、rebeccapurple等非CSS 2.1色名在IE8或旧WebView中会静默失效，不降级。
哪些CSS颜色关键字能放心用，不踩兼容性坑
只用 transparent 和 CSS 2.1 定义的 16 个基础色名才真正兜底： black、white、red、green、blue、yellow、cyan、magenta、gray（或 grey）、lightgray、darkgray、silver、maroon、purple、olive、navy。这些在 IE6+、所有现代浏览器、多数旧 WebView 中都解析成功。
别指望 lightgray 比 gray 更亮——部分浏览器里它们都指向 #d3d3d3；拼写如 light-gray 或 light gray 是非法的，整条声明会被浏览器直接忽略。
orange、rebeccapurple 这类“看起来很常用”的关键字为什么不能无脑写
orange 在 IE8 及更早版本中是无效值，元素会回退到继承色（常是黑色），且不报错；rebeccapurple 是 CSS Color Level 4 的产物，Chrome 52+、Firefox 49+ 才支持，旧版 Safari 和某些 Android 4.3 之前的 WebView 完全不认识它。
- 浏览器不会自动降级：找不到
rebeccapurple就不会用purple替代，而是跳过该声明 -
darkslategray（带连字符）IE8 支持，但等价的darkslategrey（英式拼写）在 IE8 中不认 - 系统级颜色如
ButtonText已被现代标准弃用，跨平台表现不稳定，不建议在正式项目中使用
怎么验证某个颜色名是否真的被当前环境支持
最快方法是在浏览器控制台执行：getComputedStyle(document.body).color = 'your-color-name'; console.log(getComputedStyle(document.body).color)。如果返回 rgb(...) 字符串，说明有效；如果仍返回原字符串或变成 rgba(0, 0, 0, 0)，大概率不支持。
立即学习“前端免费学习笔记（深入）”；
注意：这个测试必须在真实 DOM 元素上运行，Node.js 或终端命令行无法验证；在线“CSS 颜色大全”网站列出的 140+ 名字，很多在 Android 4.3 WebView 里就静默失效，不能全信。
用颜色关键字时最容易被忽略的语义和可访问性问题
transparent 不是 rgba(0,0,0,0) 的简写——它是唯一被明确定义为“无颜色”的关键字，在 IE9+ 全支持；而 rgba(0,0,0,0) 在 IE8 会整个声明失效。
别写 color: transparent 来隐藏文字：屏幕阅读器仍会朗读内容，实际造成可访问性缺陷。该用 visibility: hidden 或 aria-hidden="true"。
无障碍检测工具（如 axe-core）通常只校验十六进制或函数值的对比度，遇到 goldenrod 这类名字会跳过检查，导致真实对比度不达标却没报警——这是团队协作中最容易漏掉的一环。
