accent-color 在 chrome 93+、firefox 111+、safari 16.4+ 中真正可用；低版本浏览器直接忽略该属性，不解析、不继承、不报错，需用 @supports(accent-color: red) 安全兜底。
accent-color 在哪些浏览器版本中真正可用
它不是“写了就能用”的通用属性，而是有明确的版本门槛：Chrome 93+、Firefox 111+、Safari 16.4+ 才完整支持。低于这些版本时，accent-color 会被浏览器直接忽略——连解析都不会做，更不会报错或降级。
常见误判点是把“能打开页面”等同于“样式生效”。比如在 Chrome 91 里看到 checkbox 还是灰色勾，不是你写错了，是浏览器压根不认这个属性。
- Firefox 105–110 对
input[type="range"]和progress的支持不完整，已填充轨道可能仍用系统色 - Safari 15.x 完全不识别
accent-color，写了等于白写；16.0–16.3 仅部分支持 checkbox/radio，range 和 progress 无效 - Edge 基于 Chromium，行为与对应版本的 Chrome 一致，但需注意旧版 Edge（非 Chromium）完全不支持
没生效时，浏览器到底做了什么
低版本浏览器遇到不认识的 CSS 属性，标准行为是跳过整条声明，不计算、不继承、不触发重绘。这意味着：
-
:root { accent-color: #2196F3; }在 Chrome 91 中不会让任何子元素继承该值，var(--accent)也拿不到 fallback 外的值 - 即使你写了
input[type="checkbox"] { accent-color: red; }，开发者工具的 Styles 面板里根本不会显示这条规则——它被 parser 丢弃了 - 没有控制台警告，没有网络请求失败，安静得像没写过一样
如何安全兜底而不破坏现代体验
不能靠 JS 检测属性支持再插入样式（太晚，且影响 FOUC），得用 CSS 原生机制提前分流：
- 用
@supports (accent-color: red)包裹现代写法，低版本自动跳过，不影响原有样式逻辑 - 对 checkbox/radio，可同时保留传统伪元素方案（如
input[type="checkbox"]::before），但注意避免在支持accent-color的浏览器里双重渲染 - 别在 :root 里只定义
accent-color就完事——它不参与变量计算，var(--accent)不会自动 fallback 到它的值；真要联动，得显式写--accent: #2196F3; accent-color: var(--accent);
最常被忽略的兼容性细节
很多人以为加个 Babel 或 PostCSS 插件就能“转译” accent-color，但这是不可能的——它依赖浏览器原生渲染管线，没有对应的 DOM API 可模拟。所有 polyfill 尝试都止步于视觉伪造（比如用背景图盖住原生控件），反而破坏可访问性和语义。
真正该花时间的地方，是确认你的用户基线：如果仍有 >5% 用户使用 Safari 15 或 Firefox
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
