一、快速了解CSS :focus-visible伪类
:focus-visible
伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了。如果你是一个深入用户体验的开发者,这个伪类会非常有用。
:focus-visible
伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示。
是不是很拗口?规范就是这么定义的。:focus-visible
的规范并没有强行约束匹配逻辑,而是交给了UA(也就是浏览器)。我们通过真实的案例来解释下这个伪类是做什么用的。
在所有现代浏览器下,链接元素<a>
鼠标点击的时候是不会有焦点轮廓的,但是键盘访问的时候会出现,这是非常符合预期的体验。
但是在Chrome浏览器下,出现了一些特殊场景并不是这么表现的:
- 设置了背景的
<button>
按钮; - HTML5
<summary>
元素; - 设置了HTML
tabindex
属性的元素;
以上3个场景,在Chrome浏览器下鼠标点击的时候也会出现显眼的焦点轮廓,如下图:
这其实是我们不希望看到的,轮廓在点击的时候不应该出现