:focus-visible 支持来到 Firefox

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程每个阶段提供云产品。立即开始使用 200 美元免费信用额度!

看!:focus-visible 伪类选择器现在在 Firefox 中受支持,从昨天发布的 85 版本开始。我不得不赶到 MDN 文档以确认,没错,:focus-visible 页面已更新以反映新闻

:focus-visible 有什么很酷的地方?这都是关于显示在处于焦点的元素周围的蓝色焦点环。这有点像在可访问性方面喜欢轮廓(必须知道在使用键盘制表符时选择了哪个元素)但又不喜欢它的外观(必须让所有内容都符合品牌)之间的折衷方案。

该策略在很大程度上一直是使用自定义outline 的非此即彼的选择,当任何元素处于:focus 时(很好,但这意味着用于键盘制表符鼠标点击)或者完全放弃outline(不好,永远不好)。:focus-visible 实现了与:focus 相同的功能,但利用浏览器的用户输入知识(或启发式)来确定焦点是来自键盘还是鼠标。

(浏览器的启发式方法在确定输入方面是否完美?这取决于。一旦我们开始考虑触摸交互等因素,事情就会变得模糊不清。)

这意味着,我们可以删除默认焦点环(好!)以进行正确的交互类型(双好!)并同时显示我们自己的自定义样式(三好!)。请允许我从我们的年鉴中摘录 Andy Adams 的优秀示例 直接摘录。请注意,:focus-visible 无法像:focus 那样删除焦点环,因此这两个一起使用

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

.next-image-button:focus-visible {
  outline: 3px solid blanchedalmond; /* That'll show 'em */
}

Chrome 实现:focus-visible 早在 2018 年。Firefox 在此实现之前有自己的带前缀的版本,:-moz-focusring。Safari?去投票支持此功能!

Igalia 正在筹集资金并努力将其纳入 Safari!这是 Brian Kardell 关于此事的言论。