仅键盘焦点样式

正如 Eric Bailey 所说，如果它是交互式的，就需要一个焦点样式。 也许最好的选择是不要删除可聚焦元素默认的轮廓。 例如，如果您要使用 button { outline: 0; }，那么您最好使用 button:focus { /* 其他非常明显的视觉效果 */ }。 我今天才处理了一张票，其中缺少焦点样式正在损害一个依赖于视觉焦点样式来浏览网络的用户。

但是这些焦点样式在使用 Tab 键或其他键盘导航时最有用，而在通过鼠标单击触发时则不那么有用。 现在我们有了 :focus-visible！ Nelo 写道

TL;DR; :focus-visible 是 :focus 的仅键盘版本。

此外，W3C 提案中提到，除了期望键盘输入的元素（例如文本字段、contenteditable）之外，应优先使用 :focus-visible 而不是 :focus。

（另请参阅他的文章，以了解为什么鼠标单击和焦点样式可能不一致，原因不仅仅是人们不喜欢模糊的蓝色轮廓。）

对 :focus-visible 的浏览器支持相当差

但它确实有 Firefox 支持，正如 Lea Verou 所说 says

…一旦 Chrome 发布其实现，它将在 1-2 个月内大规模爆发。

这通常是现在的趋势。 一旦两个主要浏览器都支持 - 其中一个是 Chrome - 这就足以让 web 的很大一部分开始使用它。 特别是当它可以像这个属性一样安全地完成时。

安全，意思是，有一个 官方 polyfill，这意味着您可以删除默认的焦点样式，只使用 :focus-visible 样式

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline: lightgreen solid 2px;
}

但是，正如 Patrick H. Lauke 所记录的那样，您甚至可以在没有 polyfill 的情况下做到这一点，使用谨慎的选择器用法并根据需要撤消样式

button:focus { /* Some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* Undo all the above focused button styles
     if the button has focus but the browser wouldn't normally
     show default focus styles */
}
button:focus-visible { /* Some even *more* exciting button focus styles */ }

这似乎是对 web 的一项很好的改进。