：焦点可见的支持来到Firefox

Firefox 85版正式支持:focus-visible伪类选择器！这意味着什么？让我们一起来看看。

正如MDN文档已更新所示，备受期待的:focus-visible伪类选择器现已在Firefox 85版中得到原生支持。

:focus-visible 的妙处在于它巧妙地平衡了可访问性和视觉美观。我们都知道，焦点轮廓对于辅助功能至关重要（尤其在键盘导航时），但默认的蓝色焦点轮廓并不总是符合品牌设计。

以往，我们面临着两难选择：要么使用自定义轮廓，在所有元素获得焦点时（无论是键盘还是鼠标点击）都显示；要么完全取消轮廓，牺牲可访问性。而:focus-visible则完美解决了这个问题。它利用浏览器的用户输入信息（或启发式算法）来判断焦点是来自键盘还是鼠标。

（浏览器的启发式算法能否完美区分输入方式？这取决于具体情况。一旦涉及触控交互，情况就会变得复杂。）

这意味着，我们可以移除默认的焦点环（太棒了！）, 仅在需要时（键盘交互）显示自定义样式（太棒了！）。 让我们来看一个例子（感谢Andy Adams）：

<code>.next-image-button:focus {
  outline: none;
}

.next-image-button:focus-visible {
  outline: 3px solid blanchedalmond; /*  自定义焦点样式 */
}</code>

需要注意的是，:focus-visible 无法像:focus一样完全移除焦点环，因此两者通常一起使用。

Chrome早在2018年就已实现:focus-visible。Firefox之前也有自己的前缀版本:-moz-focusring。Safari用户？快去投票支持这个特性吧！Igalia正在筹集资金，努力将其添加到Safari浏览器中！Brian Kardell对此做了详细说明。

以上是：焦点可见的支持来到Firefox的详细内容。更多信息请关注PHP中文网其他相关文章！