使用css `focus-visible` 改善用户体验

focus-visible 是一个非常有用的 CSS 伪类，它解决了 Web 可访问性中的一个重要问题
:focus-visible 用于在特定情况下为元素添加焦点样式，而不是像 :focus 那样总是显示焦点环。

/* 传统 :focus - 总是显示 */
button:focus {outline: 2px solid blue;
}/* 现代 :focus-visible - 智能显示 */
button:focus-visible {outline: 2px solid blue;
}

/* 最佳实践：同时使用 :focus 和 :focus-visible */
.button {/* 基础样式 */
}/* 为不支持 :focus-visible 的浏览器提供基础焦点样式 */
.button:focus {outline: 2px solid blue;
}/* 为现代浏览器提供智能焦点样式 */
.button:focus:not(:focus-visible) {outline: none; /* 移除不必要的焦点样式 */
}.button:focus-visible {outline: 2px solid blue;/* 可以添加更丰富的焦点样式 */box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

使用场景建议
适合使用 :focus-visible
按钮、链接等交互元素

导航菜单

表单控件

自定义组件

可能需要使用 :focus
需要始终显示焦点的特殊组件

模态对话框中的焦点管理

自定义键盘导航系统

See the Pen 使用 :focus-visible 改善用户体验 by liu874396180 ( @liu874396180) on CodePen.