safari 15.3及更早版本完全忽略:focus-visible，因其css解析器不识别该伪类，整条规则被静默丢弃；需用js-focus-visible polyfill或渐进增强写法（:focus兜底+:focus-visible覆盖）实现兼容。
为什么 Safari 15.3 及更早版本完全忽略 :focus-visible
不是写法错，是浏览器解析器压根不认识这个伪类——整条 CSS 规则被直接跳过，连降级逻辑都不会执行。Safari 15.3 及更早版本（包括所有 iOS Safari）、IE 全系、Chrome 86 以下，都不支持 :focus-visible 语法。它就像写了 :banana，CSS 引擎不报错，也不渲染，静默丢弃。
:focus-visible 在 Safari 15.4+ 仍不触发的常见原因
即使版本达标，也常因 UA 启发式判断失效或配置缺失导致不生效：
- 未开启辅助功能：Safari 15.0–15.3 需手动启用“辅助功能 → 键盘 → 按 Tab 键在网页中移动焦点”，15.4+ 默认开启但部分企业定制版可能关闭
- 首次交互是鼠标：页面加载后先点按钮，Safari 进入“指针优先”模式，后续 Tab 导航可能暂不激活
:focus-visible，需按Esc或再次 Tab 才恢复 - 元素缺少语义或键盘响应能力：仅设
tabindex="0"不够，div必须配role="button"，且要监听onkeydown处理Enter/Space，否则浏览器判定“不响应键盘”，跳过匹配 -
outline: none被全局应用：若重置库或组件样式里写了* { outline: none; }，:focus-visible的样式也会被清掉，必须显式恢复
为什么不能用 @supports selector(:focus-visible) 做兼容检测
这个检测本身在 Safari 15.3 及更早版本就会失败——@supports 解析到未知伪类时，整个 @supports 块被丢弃，你连降级样式都拿不到。结果是：旧 Safari 看不到任何焦点样式，连 :focus 都没机会兜底。
真正可行的路径只有两个：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 引入
js-focus-visiblePolyfill（推荐），它在原生支持时静默退出，不支持时自动注入.js-focus-visible类和.focus-visible类 - 坚持渐进增强写法：
button:focus在前兜底，button:focus-visible在后覆盖，且确保:focus声明顺序靠前
移动端 Safari 下 :focus-visible 基本不可用的现实
触摸 tap 后，iOS Safari 几乎从不触发 :focus-visible；软键盘弹出前，<input> 获得焦点也不会激活它。这不是 Polyfill 能绕过的限制，是平台级行为。
此时必须放弃“精准区分”，改用保守策略：
- 对所有可聚焦元素统一用
:focus提供基础焦点样式 - 配合
js-focus-visible在桌面端启用键盘专属样式 - 避免依赖
:focus-visible实现核心可访问性功能——键盘导航的视觉反馈必须由:focus保底
真正难的不是加一行 <script></script>，而是确保每个可聚焦节点（React Button、Web Component、tabindex="0" 的 div）都被 Polyfill 正确识别并注入事件监听。漏掉任意一个，键盘用户就彻底失焦了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
