:focus-visible
伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了。如果你是一个深入用户体验的开发者,这个伪类会非常有用。
:focus-visible
伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示。
是不是很拗口?规范就是这么定义的。:focus-visible
的规范并没有强行约束匹配逻辑,而是交给了UA(也就是浏览器)。我们通过真实的案例来解释下这个伪类是做什么用的。
在所有现代浏览器下,链接元素<a>
鼠标点击的时候是不会有焦点轮廓的,但是键盘访问的时候会出现,这是非常符合预期的体验。
但是在Chrome浏览器下,出现了一些特殊场景并不是这么表现的:
- 设置了背景的
<button>
按钮; - HTML5?
<summary>
元素; - 设置了HTML?
tabindex
属性的元素;
以上3个场景,在Chrome浏览器下鼠标点击的时候也会出现显眼的焦点轮廓,如下图:
这其实是我们不希望看到的,轮廓在点击的时候不应该出现(没有高亮的必要),但是键盘访问的时候需要出现(让用户知道当前聚焦元素),Firefox以及IE浏览器的表现均符合我们的期望,点击访问无轮廓,键盘访问才有,Safari浏览器按钮表现符合期望。
但是,我们又不能简简单单设置outline:none
来处理,因为这样会把键盘访问时候应当出现的焦点轮廓给隐藏掉,带来严重的无障碍访问问题。
为了兼顾视觉体验和键盘无障碍访问,我之前的做法是使用JavaScript进行判断,如果元素的:focus
触发是键盘访问触发,就给元素添加自定义的outline
轮廓,否则,去除outline
,还是颇有成本的。
现在有了:focus-visible
伪类,所有的问题迎刃而解,在目前版本的Chrome浏览器下,浏览器认为键盘访问触发的元素聚焦才是:focus-visible
所表示的聚焦。换句话说,:focus-visible
可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。所以,如果我们希望去除鼠标点击时候的outline
轮廓,而保留键盘访问时候的outline
轮廓,只要一条短短的CSS规则就可以了:
:focus:not(:focus-visible) { outline: 0;}
Chrome浏览器下让人头疼的轮廓问题就解决了,眼见为实,您可以狠狠地点击这里::focus-visible与Chrome浏览器outline轮廓控制demo
此时,我们点击设置了tabindex
属性的<div>
元素没有轮廓,如下图:
但是,如果我们使用键盘访问,例如按下TAB键进行索引,轮廓依然存在,如如下图:
完美,感动!
二、应该很快就会默认支持
目前Chrome浏览器(版本67+就支持)虽然支持,但是,需要浏览器开启支持web实验特性才行:
但是我相信,很快就会默认放开,都时候,之前写UI组件时候折腾的一大堆体验相关的JavaScript代码就可以全部删掉了。
如果你迫不及待想在项目中应用这么好的特性,可以引入这段polyfill脚本。
自己是一个五年的前端工程师,希望本文对你有帮助!
这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术
点击:加入