:focus-visible 伪类：何时以及如何使用它来优化焦点样式？

深入了解：何时以及如何使用 css 的 :focus-visible 伪类

在使用 :focus 伪类进行焦点样式时，可能会遇到一个问题：当鼠标点击元素时，焦点样式也会生效，这可能不是你想要的。

为了解决这个问题，引入了 :focus-visible 伪类。它允许你在以下情况下应用焦点样式：

• 使用 tab 键聚焦元素
• 使用键盘快捷键聚焦元素

通过仅在使用键盘操作时显示焦点样式，你可以避免在点击时出现不必要的视觉噪声。

扩展应用场景

除了解决上述问题之外，:focus-visible 伪类还有其他应用场景，如下所示：

• 自定义控件：你可以将 :focus-visible 用于自定义控件（例如按钮），以使其仅在键盘操作时显示焦点样式，就像原生控件一样。
• 无障碍访问优化：对于视力较弱的人来说，确保视觉焦点指示可见非常重要。:focus-visible 可以帮助创建满足可访问性要求的焦点样式，例如满足 wcag 2.1 sc 1.4.11 非文本对比度的要求。

示例

以下 css 代码展示了如何使用 :focus-visible 为按钮创建仅在使用键盘操作时才会显示焦点样式：

button {
  background-color: #ccc;
  padding: 10px;
  border: 1px solid #ccc;
}

button:focus-visible {
  background-color: #fff;
  border-color: #000;
  outline: none;
}