强大的CSS：focus-visible伪类真的太6了！
一、快速了解CSS :focus-visible伪类
:focus-visible
伪类是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，但足够了。如果你是一个深入用户体验的开发者，这个伪类会非常有用。
潮阳网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
: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的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
分享标题：强大的CSS：focus-visible伪类真的太6了！
标题路径：https://www.cdcxhl.com/article36/gjpjpg.html
成都网站建设公司_创新互联，为您提供企业网站制作、网站营销、动态网站、微信公众号、手机网站建设、网页设计公司
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
