看!: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 关于此事的言论。
使用 :not() 选择器是否有任何优势,例如
a:focus { outline:1px dotted grey; outline-offset:1px; }
a:focus:not(:focus-visible) { outline: none; }
对于不支持 :focus-visible 的浏览器来说,这是否比在 :focus 上删除轮廓更兼容?
这也是我会采用的方法。此外,如果您尝试将 focus-visible 声明与其他内容组合,例如
a:hover, a:focus-visible{
,如果浏览器不支持 focus-visible,它将破坏两个声明。在我看来,使用常规焦点,然后用第二个语句在某些情况下删除它,如您所述,更安全。我喜欢它!
短期内是的,使用 focus:not(:focus-visible) 有帮助。
但作为此更新的一部分,浏览器也正在更改 UA 样式表以使用 :focus-visible 来实现默认焦点样式(这是 Firefox 所做的,一个补丁最近已在 Chromium 中实现)。
这意味着最终您只需要这样做
.next-image-button:focus-visible {
outline: 3px solid blanchedalmond;
}
您甚至不需要使用 :focus
作为与其他人一起在这个提案上工作的人之一,我很高兴你喜欢它!我的公司 Igalia 在所有浏览器引擎上工作,我们目前甚至正在 WebKit 中为此工作。更有趣的是,我认为这项工作是由开发者通过我们与 Open Collective 进行的合作,名为 Open Prioritization 选择的。在这种情况下,您不仅可以投票支持该问题,还可以帮助我们实现资金目标,以支持这项工作以及类似的工作。
如果您想详细了解目前的工作以及有关更大努力的更多链接,您还可以在最近由负责该工作的开发者撰写的报告中找到。
但为什么取这个奇怪的命名?“焦点可见”
还是我错过了什么(非英语母语)?
如果您阅读 a11y 对焦点状态的要求,而不是其技术要求,您会发现所有用户都应该有明确定义的焦点状态。该要求提到了可能使用鼠标和键盘且可能忘记他们刚刚点击了什么内容的认知障碍人士。
我认为我们真正需要的解决方案是提供更多有趣的选择,用于焦点状态设计。
当使用 js 以编程方式控制焦点时,焦点可见会受支持吗,还是在用户按下制表键等操作之前会应用正常的焦点轮廓样式?
遗憾的是,它不受支持。至少对我来说,当使用 element.focus() 时,焦点可见样式会显示出来是有道理的,但事实并非如此。
嘿,谢谢,我讨厌它。现在很多网站都在随机的网站元素周围显示这些难看的环,分散了我的注意力。我很高兴它已为那些能从中受益的人开发,但作为一个(像大多数人一样)不需要它来增强可访问性的人,它实际上对我来说降低了在线体验。
为什么不方便地让那些不需要它的人关闭它?为什么在它只对一小部分用户有用时默认启用它?可访问性功能绝对应该可用,但没有理由将它们强加给那些不需要它们的人的浏览器。也许在设置中创建一个可访问性选项卡,让人们可以根据自己的需求和偏好轻松地打开和关闭这类功能,或者使其成为安装期间可以设置的切换按钮,但不要随意添加它。