CSS3的8位hex颜色兼容性到底如何样

8位HEX颜色#RRGGBBAA仅Chrome 65+、Firefox 49+、Edge 79+、Safari 16+及iOS Safari 13.4+支持，旧版浏览器静默忽略；必须前置fallback并依赖层叠顺序降级，@supports无法可靠检测。

8位HEX颜色（#RRGGBBAA）在现代浏览器中已稳定可用，但不兼容IE、老安卓WebView、iOS Safari 13.4之前版本，以及Chrome 64及更早版本——这些环境会静默忽略该声明，不报错也不回退，极易误判为CSS未生效。

哪些浏览器真正支持 #RRGGBBAA

支持是明确的，但有硬性版本门槛：

1. Chrome 65+（2018年3月起）✅
2. Firefox 49+（2016年9月起）✅
3. Edge 79+（Chromium版起）✅
4. Safari 16+（macOS Ventura / iOS 16起）✅
5. iOS Safari 13.4+ ✅（注意：13.3及更早❌）
6. Android WebView ≤ Android 9（即Chrome 76内核前）❌
7. IE全系列 ❌（包括IE11）

#RRGGBBAA 写错一位就全挂

浏览器对格式校验极严，任何偏差都会导致整条声明失效：

1. #ff00008（7位）→ 静默失败
2. #FF000080（大写）→ 不识别
3. #ff0000 80（空格）→ 解析中断
4. "#ff000080"（引号包裹）→ 当字符串字面量处理，color: var(--primary)直接取默认值（常为黑色）
5. 在CSS变量中写错：--primary: #ff00008; → 变量值为空，var(--primary, #000)才兜得住

为什么不能只靠 @supports 检测

@supports (color: #ff000080) 在Chrome 64等旧引擎里根本无法解析该语法，CSS.supports() 直接返回 false，你无法区分是“不支持”还是“拼写错误”。它不提供语法容错能力，仅做特性存在性判断。

安全 fallback 的唯一可靠写法

必须用层叠顺序强制降级，且 fallback 必须前置：

button {background-color: #0b79b9;/* Chrome 64 及所有旧引擎能解析 */background-color: #0b79b966; /* 新引擎覆盖 */}

1. 顺序不能反：后写的才会被新引擎采用；前置的才是旧引擎唯一能读到的
2. 别混用函数 fallback：color: rgba(11,121,185,0.4); color: #0b79b966; 也合法，但需注意 rgba() 参数格式（逗号后不能有空格，alpha 必须是 0–1 小数）
3. 在 CSS 变量场景下，更推荐拆分存储：--primary-rgb: "11,121,185"; --primary-alpha: 0.4;，再组合 rgba(var(--primary-rgb), var(--primary-alpha))，规避十六进制解析风险

最易被忽略的一点：即使你在 DevTools 里看到颜色“看起来是对的”，也不能说明 #RRGGBBAA 生效了——旧浏览器可能继承了父级颜色或用了默认文本色，表面正常实则完全没走你写的那行代码。真要验证，得用 getComputedStyle(el).backgroundColor 看返回值是不是 rgb(...) 或 rgba(...)，而不是依赖肉眼观察。