“:focus-visible” 的技巧

值得重复：所有交互式元素都应该有焦点样式。这样，键盘用户就可以知道他们何时将焦点移动到该元素上。

但是，如果您单独使用 :focus，它有一个很多人不喜欢的副作用。这意味着，当您（使用鼠标）点击一个交互式元素时，您会看到焦点样式。可以说，您作为鼠标用户不需要这种反馈，因为您只是将光标移动到那里并点击了。无论您怎么看待它，它都让很多人多年来感到厌烦，以至于他们完全删除了焦点样式，这对网络可访问性来说是一个糟糕的损失。

如果我们只在使用键盘而不是鼠标来聚焦某个东西时应用焦点样式，会怎么样？Lea Verou 几年前指出了这一点

我将开始在我的所有样式表中添加以下规则

:focus:not(:focus-visible) { outline: none }

消除了鼠标用户的烦人轮廓，但为键盘用户保留了它，并且被不支持 :focus-visible 的浏览器忽略。

— Lea Verou (@LeaVerou) 2018 年 9 月 28 日

这是对 Chrome 在一个标志后面放弃该功能的回应。聪明聪明。

快进几年，Chrome 正在发布它，无需任何标志。他们同意 Lea 的想法

通过将 :focus-visible 与 :focus 结合使用，您可以更进一步，根据用户的输入设备提供不同的焦点样式。如果您希望焦点指示器依赖于输入设备的精度，这将非常有用

/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}
  
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

我建议您尝试不使用 button 的这些选择器，使其全局应用！

还有更多内容值得挖掘，所以我会在这里链接一些更多信息

• Chromium 博客 文章介绍了选择器的启发式方法。这很棘手。就好像有一个算法来确定 :focus-visible 是否会匹配，而您只需要相信它。它还涵盖了 Firefox 早已拥有 :-moz-focusring 的想法，但行为差异很大，因此他们不建议您在追求一致行为时使用它。
• Matthias Ott 在他的博客中对此进行了介绍，并提供了一些有用的信息，例如使用 官方 polyfill 以及如何在 DevTools 中正确查看样式（有一个新的复选框）。
• 我们以前也介绍过这一点。 在那篇文章中，我们注意到 Lea 的 推文，她说她认为当它真正发布时，它的使用量会激增。让我们拭目以待吧（希望如此）！
• 我们的年鉴条目 包含大量详细信息。