rebeccapurple 在 IE 全系和 Safari ≤14.0 中失效，Chrome 84+、Firefox 79+、Edge 90+、Safari 14.1+ 支持；不支持时整条声明被丢弃，须用 color: #663399; color: rebeccapurple; 回退。
rebeccapurple 能用，但不是“随便写就能稳”的颜色——它在 IE 中完全不支持，Chrome/Firefox/Edge 90+ 没问题，Safari 14.1+ 开始支持。如果你的项目还要兼容 IE 或老 Safari，就别用；否则可以放心写，但得加 fallback。
rebeccapurple 在哪些浏览器里会失效
IE 所有版本（包括 IE11）直接忽略该声明，降级为 color: inherit 或初始值；Safari ≤14.0 也不识别。实测中，border-color: rebeccapurple 在 Safari 14.0 下渲染为透明边框，不是默认黑色或灰色，这点容易误判为样式没生效。
- ✅ 支持：Chrome 84+、Firefox 79+、Edge 90+、Safari 14.1+
- ❌ 不支持：IE 全系、Safari ≤14.0、iOS Safari ≤14.0
- ⚠️ 注意：部分老旧 Android WebView（如 Android 9 系统自带）也存在解析失败现象，建议用
caniuse查具体 UA
必须加 fallback 的真实原因
命名色本身不带降级机制，CSS 解析器遇到不认识的颜色名，整条声明会被丢弃（不是取默认值），导致属性“消失”。比如：
button {
color: rebeccapurple;
background-color: aliceblue;
}
在 IE 中，color 这行被跳过，文字变成默认黑色；而 background-color 因为是基础色名（aliceblue 属于 CSS2.1 16 色扩展集，IE8+ 支持），仍生效。所以 fallback 不是“锦上添花”，而是防止视觉断裂。
- 推荐写法：
color: #663399; color: rebeccapurple;（后声明覆盖前声明） - 不要用
color: rebeccapurple, #663399—— 这是无效语法 - 如果用 CSS 变量统一管理，fallback 得写在变量定义处，而不是使用处
VS Code / WebStorm 里怎么输不踩坑
编辑器不会为 rebeccapurple 补全，哪怕你敲到 rebe 也不会弹出提示。这是因为它不在编辑器内置的 CSS 颜色关键词列表里（只收了 16 个基础色 + 常见扩展色，rebeccapurple 是后来加入的标准，工具链更新滞后）。
- 必须手敲全名：
rebeccapurple，拼错一个字母（比如rebecapurple）就失效 - 没有缩写、没有别名，大小写不敏感但建议小写（保持团队风格统一）
- ESLint 若启用了
color-no-named规则，它会把rebeccapurple当作违规项报错，需在规则配置中显式放行
和 purple/darkmagenta 的实际差异在哪
三者色相接近，但明度与饱和度不同：rebeccapurple（#663399）比 purple（#800080）更灰、更暗，比 darkmagenta（#8b008b）少一点红调、多一点蓝灰感。UI 中它更耐看，尤其在浅色背景上文字对比度更高（WCAG AA 级达标），但深色模式下可能发闷。
- 测试对比：在
background-color: white上，rebeccapurple文字对比度 ≈ 5.6，purple≈ 4.9，darkmagenta≈ 5.1 - 别把它当“高级版 purple”来替换旧代码——除非设计系统明确将它定为主色，否则引入会增加维护负担
- 它没有 alpha 通道，要透明效果得换
rgba(102, 51, 153, 0.8)或 HSLA
真正麻烦的不是写错名字，而是忘了它在旧环境里会彻底消失——不是变淡、不是变黑，是“没这行声明”，连 debug 都容易漏掉这一层。上线前务必在目标最低浏览器里手动验证渲染结果，别只信本地开发环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
