旧版 safari（12–14）完全不支持 accent-color，整条声明被静默忽略，连 @supports (accent-color: red) 也无效；必须用 @supports (color: var(--x)) 间接检测，并配合 html class 降级和伪元素慎用。

旧版 Safari（12–14）根本解析不了 accent-color，不是失效，是忽略整条声明

它连语法都不认，accent-color: #3b82f6 这行会被静默跳过，控件颜色退回到系统默认或继承色。这不是兼容性“差”，而是完全不支持——和 IE 不支持 Flexbox 是同一类问题。

关键点在于：@supports (accent-color: red) 在这些版本里也无效（Safari 12–14 不支持该特性查询），所以不能靠它做检测。

实操建议：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 用 @supports (color: var(--x)) 间接判断：Safari 15.4+ 才支持变量 + accent-color，而 Safari 12–14 连变量都不支持，因此这个检测能覆盖到
• 必须搭配 class fallback：在 上加 class="no-accent-color"（JS 检测后注入），再写降级样式
• 不要试图在旧版 Safari 里“模拟” accent-color 行为——伪元素覆盖（如 ::before）会破坏原生可访问性，且无法响应禁用状态、焦点、高对比度模式

accent-color 在 Safari 15.4+ 仍不生效？先检查这三件事

Safari 对 accent-color 的启用条件比 Chrome/Firefox 更严格，常见失效不是浏览器版本问题，而是渲染前提被破坏。

典型错误现象：内联写了 style="accent-color: red"，但单选框还是灰色。

实操建议：

• 删掉所有对 input[type="radio"] 或 input[type="checkbox"] 的 appearance 设置，包括 appearance: none、-webkit-appearance: none，哪怕只写在全局 reset 里也会让整个页面失效
• 避免在同一规则中混用 accent-color 和 color：Safari 可能优先按 color 推导主题色，导致 accent-color 被忽略
• 确保 <meta name="color-scheme" content="light dark"> 存在：没有它，Safari 在深色模式下可能强制回退到系统色，覆盖你设的值

怎样安全地批量设置并兼顾降级？用 CSS 变量 + @supports 组合

直接写死颜色值会导致主题切换时维护困难，而纯 @supports 块又无法覆盖 Safari 12–14。最稳路径是分层控制。

实操建议：

• 在 :root 定义变量：:root { --form-accent: #3b82f6; }
• 先写降级样式（所有浏览器都执行）：input[type="checkbox"], input[type="radio"] { accent-color: #3b82f6; }
• 再用 @supports 覆盖为变量（仅现代浏览器执行）：@supports (accent-color: red) { input[type="checkbox"], input[type="radio"] { accent-color: var(--form-accent); } }
• 禁用状态统一灰度处理：input:disabled { filter: grayscale(50%); }，因为 accent-color 在禁用时本就不生效

为什么别指望 JS 读取系统强调色来桥接 accent-color

有人想用 navigator.userAgentData.getHighEntropyValues(['platform']) 判断 Windows 并读取系统 AccentColor，这条路走不通。

真正容易被忽略的是：accent-color 在 CSS 层面没有任何机制能反射操作系统原生值。Windows 的 AccentColor 是 UWP 应用专属上下文，网页渲染引擎无权访问；macOS/iOS 的系统强调色也没有对应 Web API。

所以所谓“自动对接系统色”，只有两种现实路径：

• 设为 accent-color: auto，依赖浏览器按平台+主题硬编码的有限映射（Chrome/Firefox 支持较好，Safari 保守）
• 让用户手动选色存入 localStorage，再通过 :root { --sys-accent: #0078d7; accent-color: var(--sys-accent); } 注入——但这已脱离“自动”范畴

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！