一, 快速了解 CSS :focus-visible 伪类
: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 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/d32607fd84c9