注意！8位 HEX 颜色值 #RRGGBBAA 并不是所有浏览器都兼容。当前只有 Chrome 65+、Firefox 49+、Edge 79+、Safari 16+ 以及 iOS Safari 13.4+ 等较新版本能够正确识别，旧版浏览器通常会直接静默忽略，不会给出任何报错提示。与此同时，这种写法必须提前提供 fallback，并依赖 CSS 层叠顺序完成降级处理，单靠 @supports 也无法稳定检测其支持情况。
从现代浏览器兼容性来看，8位 HEX 颜色（#RRGGBBAA）整体支持已经比较理想，但仍需特别注意：它**不支持 IE、老版本 Android WebView、iOS Safari 13.4 之前的系统，以及 Chrome 64 和更早版本**。在这些浏览器环境中，这条 CSS 声明会被悄悄忽略，既不会报错，也不会自动回退，因此开发时很容易误以为是样式没有加载成功。
哪些浏览器真正支持 #RRGGBBAA
支持范围其实很明确，但前提是必须达到对应的浏览器版本门槛：
- Chrome 65+（2018年3月起）✅
- Firefox 49+（2016年9月起）✅
- Edge 79+（基于 Chromium 的新版 Edge）✅
- Safari 16+（macOS Ventura / iOS 16 起）✅
- iOS Safari 13.4+ ✅（注意：13.3 及更早版本均不支持 ❌）
- Android WebView ≤ Android 9（即 Chrome 76 内核之前）❌
- IE 全系列 ❌（包括 IE11）
#RRGGBBAA 写错一位就会整体失效
浏览器对 8 位十六进制颜色格式的校验非常严格，只要格式稍有偏差，整条声明就会直接失效：
#ff00008（7位）→ 静默失效#FF000080（大写）→ 无法识别#ff0000 80（中间含空格）→ 解析被中断"#ff000080"（使用引号包裹）→ 会被当作字符串字面量处理，color: var(--primary)会直接回退到默认值（通常是黑色）- 在 CSS 变量中写错：
--primary: #ff00008;→ 变量值无效，只有var(--primary, #000)这种写法才能兜底
为什么不能只靠 @supports 检测
@supports (color: #ff000080) 在 Chrome 64 等旧版浏览器引擎中根本无法正确解析该语法，CSS.supports() 也只会直接返回 false。问题在于，你无法判断这到底是“浏览器不支持”，还是“颜色值本身写错了”。换句话说，它只能做基础的特性存在性判断，并不具备可靠的语法容错和兼容性区分能力。
安全 fallback 的唯一可靠写法
想让 8 位 HEX 颜色在不同浏览器中安全降级，必须依赖 CSS 层叠顺序，而且 fallback 一定要写在前面：
button {
background-color: #0b79b9;/* Chrome 64 及所有旧引擎能解析 */
background-color: #0b79b966; /* 新引擎覆盖 */
}- 顺序绝对不能写反：后声明的样式才会被新浏览器覆盖采用，而前面的普通颜色值才是旧浏览器唯一能识别到的 fallback
- 不要随意混用函数式 fallback：
color: rgba(11,121,185,0.4); color: #0b79b966;这种写法虽然同样有效，但要特别留意rgba()的参数格式（逗号后不能带空格，alpha 必须写成 0–1 之间的小数） - 在 CSS 变量场景下，更推荐把颜色拆开存储：
--primary-rgb: "11,121,185"; --primary-alpha: 0.4;，再通过rgba(var(--primary-rgb), var(--primary-alpha))组合使用，这样可以避开 8 位十六进制颜色的解析兼容风险
还有一个最容易被忽视的细节：即使你在 DevTools 中看到页面颜色“看起来没问题”，也不能证明 #RRGGBBAA 真的已经生效——旧浏览器有可能只是继承了父元素颜色，或者使用了默认文本色，表面上显示正常，实际上根本没有执行你写的那条 CSS。真正要验证兼容性，应该使用 getComputedStyle(el).backgroundColor 查看实际返回值是否为 rgb(...) 或 rgba(...)，而不是仅凭肉眼判断。
