旧浏览器仅支持#rrggbb或#rgb十六进制颜色，应避免rgba、hsl等现代写法；优先用小写缩写hex（如#f63），禁用命名色与4位写法；透明度可用alpha滤镜或半透图降级；自动化工具可检测非hex颜色风险。
旧浏览器不支持 rgba、hsl 等现代颜色写法怎么办
IE8 及更早版本只认 #rrggbb（6位）或 #rgb（3位）十六进制颜色，遇到 rgba(0, 0, 0, 0.5) 或 hsl(200, 50%, 50%) 会直接忽略整条样式声明，导致背景/文字消失等意外效果。
- 优先用
#ffffff替代white、rgb(255,255,255)，避免命名色在 IE7–8 中的不一致（如orange在 IE7 不被识别） - 透明度不能靠
rgba()实现时，改用半透图片（background-image: url(transparent-bg.png)）或 IE 专属滤镜（filter: alpha(opacity=50)），但仅限 IE6–8 - 若必须用灰阶，
#999比gray更稳；#000比black兼容性更好
hex 颜色写法要注意哪些细节
看似简单，但大小写、位数、缩写习惯都会影响可维护性和旧浏览器解析稳定性。
- 统一用小写字母：
#ff6b35而非#FF6B35，避免某些老工具（如旧版 YUI Compressor）误判为非法值 - 能缩写就缩写：
#f63和#ff6633等价，但更短、更易读；但#fb3a这类 4 位写法（CSS4 alpha 扩展）在任何旧浏览器都不支持，必须避开 - 不要混用命名色和 hex：同一项目中避免
color: #333; border-color: gray;，因为gray在 IE7 是#808080，而#333是#333333，语义不统一
如何自动化检查项目中的非 hex 颜色
人工排查容易遗漏，尤其在多人协作或引入第三方 CSS 时。可用轻量工具快速定位风险点。
- 用 PostCSS 插件
postcss-color-hex-alpha或stylelint配合color-no-named+color-no-hex-name规则，强制报错非 hex 写法 - 正则搜索（VS Code / grep）：
color:\s*(?!#)[^;{]+(rgb|hsl|transparent|rebeccapurple|aliceblue)，能抓出大多数隐患 - 注意 CSS-in-JS 场景：如
styled.div`background: ${theme.bg}`，变量值若为rgba()，同样会在旧浏览器失效，需提前约束 theme 值为 hex 字符串
hex 颜色无法满足需求时的折中方案
有些设计必须用透明、渐变或系统色，纯 hex 无法覆盖。这时候得接受「部分降级」，而不是强行兼容。
立即学习“前端免费学习笔记（深入）”；
- 半透明遮罩层：用
#000+filter: alpha(opacity=30)（IE），配合background-color: rgba(0,0,0,0.3)（现代浏览器），利用层叠优先级让旧浏览器只生效前者 - 渐变按钮：提供纯色
background: #4a90e2作为 fallback，再加background: linear-gradient(...)，旧浏览器自动忽略后一条 - 系统色（如
CanvasText）完全不可靠，IE 和早期 Firefox 解析不一致，一律换为明确 hex 值
真正麻烦的不是写不出兼容代码，而是设计师给的标注图里混着 HSLA 值、开发顺手写了 color-mix()、或者 UI 库默认输出 rgb —— 这些地方最容易漏检。hex 是底线，不是装饰。
