ie、uc 及 safari 15.0 以下浏览器完全不支持 accent-color；safari 15.0–15.3 仅支持 checkbox/radio，忽略 range 轨道色；@supports 需结合 appearance: none 精确检测，降级应重建 dom 结构而非重复设 accent-color。
哪些浏览器根本不支持 accent-color？
Chrome 93+、Firefox 92+、Edge 93+ 原生支持；Safari 15.4+ 才完整支持全部四类控件（checkbox/radio/range/progress）。Safari 15.0–15.3 只认 input[type="checkbox"] 和 input[type="radio"]，对 input[type="range"] 的已填充轨道色完全无视；更老的 Safari、IE、UC 浏览器则完全不解析该属性。
@supports 检测必须写对，否则降级失效
不能只写 @supports (accent-color: #000) 就完事——部分旧版 Safari（如 15.2）会错误地返回 true，但实际渲染时 range 仍用系统蓝。正确姿势是显式限定目标元素：
@supports (accent-color: #000) and (appearance: none) {
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--primary);
}
}
这样能过滤掉“声称支持却漏实现”的边缘版本。未命中 @supports 的环境，浏览器会跳过整块规则，自然回落到后备样式。
降级方案不是“补颜色”，而是补结构
accent-color 失效 ≠ 颜色没变，而是原生强调区根本不存在了。所以降级重点不是覆盖颜色，而是重建可样式化的 DOM 结构：
- 对
input[type="checkbox"]和input[type="radio"]：用appearance: none+::before伪元素画勾/圆点，再配background-color和border - 对
input[type="range"]：必须拆解为::webkit-slider-runnable-track（轨道）和::webkit-slider-thumb（滑块），分别设background；Firefox 用::range-track和::range-thumb - 对
progress：WebKit 内核需::webkit-progress-bar和::webkit-progress-value；Firefox 用::progress-bar和::progress-value
别试图在降级分支里再塞一遍 accent-color——它不会复活，只会白占一行 CSS。
变量 fallback 要防“空变量”陷阱
写 accent-color: var(--primary, #007bff) 看似稳妥，但如果 --primary 在 :root 里根本没定义，某些旧浏览器（如 Safari 15.1）会把整个声明丢弃，而非用 fallback。安全做法是：
:root {
--primary: #2196F3;
accent-color: var(--primary);
}
@supports not (accent-color: #000) {
:root {
--primary: #007bff; /* 强制定义 fallback 值 */
}
}
真正容易被忽略的是：降级逻辑必须跑在 accent-color 渲染路径之外——一旦你用 appearance: none 切换到自定义样式，accent-color 就彻底退出游戏，后续所有颜色控制都得靠传统手段接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
