CSS :focus-visible: 让键盘侠不再尴尬，Web体验更上一层楼
想象一下这样的场景：你坐在电脑前，一手捧着热气腾腾的咖啡，另一只手潇洒地敲击着键盘，熟练地使用Tab键在网页上跳跃，寻找你想要点击的按钮。突然，你停了下来，盯着屏幕，一脸茫然：“我到底选中了哪个按钮？”
是不是觉得这个场景似曾相识？这就是我们今天的主角 :focus-visible 要解决的问题。
在Web开发的世界里，我们一直努力让用户体验更好。鼠标点击操作简单直观，但对于那些更喜欢键盘导航的用户来说，体验往往差强人意。传统的 :focus 伪类虽然能高亮显示当前获得焦点的元素，但它总是“一视同仁”，无论用户是通过鼠标点击还是键盘导航，都会显示焦点样式。这在鼠标用户眼中，可能会显得有些多余，甚至破坏了页面的美观。
:focus-visible 的出现，就像一缕阳光照进了键盘导航用户的世界。它只在键盘导航时才显示焦点样式，让鼠标用户享受简洁的界面，同时让键盘用户清晰地知道自己当前选中的元素。这就像给键盘侠们配备了一把“隐形剑”，只有在他们使用的时候才会显现出锋芒。
:focus-visible 到底是什么？
简单来说，:focus-visible 是一个CSS伪类，它选择器只在浏览器认为焦点应该以某种明显的方式可见时才应用样式。通常，这意味着用户正在使用键盘或其他非鼠标输入设备进行交互。
为什么要用 :focus-visible？
- 提升键盘导航体验： 这是最核心的目的。让键盘用户清晰地知道自己当前选中的元素，提高操作效率。
- 避免视觉干扰： 对于鼠标用户来说，不必要的焦点样式可能会显得多余，甚至破坏页面的美观。
:focus-visible可以避免这种情况，让鼠标用户享受更简洁的界面。 - 增强可访问性： 对于有视觉障碍的用户来说，清晰的焦点指示器至关重要。
:focus-visible可以帮助他们更好地使用键盘导航，提高网站的可访问性。 - 遵循最佳实践： 使用
:focus-visible是遵循Web可访问性标准的最佳实践之一，可以提升网站的整体质量。
:focus-visible 和 :focus 有什么区别？
这是初学者最容易混淆的地方。简单来说：
:focus： 无论用户是通过鼠标点击还是键盘导航，只要元素获得焦点，:focus就会应用样式。:focus-visible： 只有在浏览器认为焦点应该以某种明显的方式可见时，:focus-visible才会应用样式。通常，这意味着用户正在使用键盘或其他非鼠标输入设备进行交互。
可以把 :focus 想象成一个“大喇叭”，只要有人说话（元素获得焦点），它就会大声广播。而 :focus-visible 则像一个“智能麦克风”，只有在特定的人（键盘用户）说话时，才会开启。
如何使用 :focus-visible？
使用 :focus-visible 非常简单，只需要在CSS样式表中添加相应的规则即可。
例如，我们想要为按钮添加焦点样式，但只在键盘导航时显示：
button:focus-visible {
outline: 2px solid dodgerblue;
outline-offset: 2px;
}这段代码的意思是：当按钮通过键盘导航获得焦点时，会显示一个蓝色的外边框。
更复杂一点的例子：
假设我们有一个导航菜单，我们希望在鼠标悬停时改变链接的颜色，在键盘导航时显示焦点样式。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>nav ul li a {
color: #333;
text-decoration: none;
padding: 10px 15px;
display: block;
}
nav ul li a:hover {
color: dodgerblue;
}
nav ul li a:focus-visible {
outline: 2px solid dodgerblue;
outline-offset: 2px;
}在这个例子中，当鼠标悬停在链接上时，链接的颜色会变成蓝色。当使用键盘导航选中链接时，会显示一个蓝色的外边框。这样，鼠标用户不会看到多余的焦点样式，而键盘用户可以清晰地知道自己当前选中的链接。
兼容性问题：
:focus-visible 的兼容性在现代浏览器中已经相当不错。但是，为了兼容一些旧版本的浏览器，我们可以使用 focus-visible polyfill。
focus-visible polyfill 是一个JavaScript库，它可以模拟 :focus-visible 的行为，让旧版本的浏览器也能支持这个伪类。
使用方法很简单：
- 引入
focus-visible.js文件。 - 在CSS样式表中，使用
:focus-visible伪类。
<script src="focus-visible.js"></script>一些需要注意的地方：
- 不要移除
:focus样式： 即使使用了:focus-visible，也不要完全移除:focus样式。:focus仍然是重要的可访问性手段，特别是对于那些使用辅助技术的用户来说。 可以考虑通过:focus:not(:focus-visible)来控制:focus的样式，使其在非键盘导航时显示不同的样式。 - 保持焦点样式的清晰可见： 焦点样式应该清晰可见，易于辨认。 可以使用颜色、边框、背景色等方式来突出显示焦点元素。 避免使用过于 subtle 的样式，以免用户难以察觉。
- 考虑不同设备和浏览器的差异： 不同设备和浏览器对
:focus-visible的支持程度可能有所不同。 在使用时，应该进行充分的测试，确保在各种环境下都能正常工作。 - 与JavaScript结合使用： 在一些复杂的情况下，可能需要使用JavaScript来手动控制焦点的显示。 例如，在模态框中，可以使用JavaScript来确保焦点始终停留在模态框内部。
:focus-visible 的进阶用法：
除了基本的样式设置，:focus-visible 还可以与其他CSS属性结合使用，实现更高级的效果。
- 动画效果： 可以为
:focus-visible添加动画效果，使焦点切换更加流畅自然。
button:focus-visible {
outline: 2px solid dodgerblue;
outline-offset: 2px;
transition: outline-color 0.2s ease-in-out;
}
button:focus-visible:hover {
outline-color: royalblue;
}在这个例子中，当按钮获得焦点时，外边框的颜色会以动画的方式过渡。当鼠标悬停在按钮上时，外边框的颜色会变成深蓝色。
- 自定义焦点指示器： 可以自定义焦点指示器的样式，使其与网站的整体风格更加协调。
button:focus-visible {
outline: none; /* 移除默认的外边框 */
box-shadow: 0 0 0 2px dodgerblue; /* 添加自定义的阴影 */
}在这个例子中，我们移除了默认的外边框，并添加了一个蓝色的阴影作为焦点指示器。
- 响应式设计： 可以根据屏幕尺寸和设备类型，调整焦点样式的显示方式。
@media (max-width: 768px) {
button:focus-visible {
outline: 1px solid dodgerblue;
outline-offset: 1px;
}
}在这个例子中，当屏幕尺寸小于768像素时，外边框的粗细会减小。
总结：
:focus-visible 是一个强大的CSS伪类，它可以帮助我们提升键盘导航的用户体验，避免视觉干扰，增强可访问性，并遵循最佳实践。 它就像一位默默无闻的英雄，守护着键盘侠们的权益，让Web体验更上一层楼。
掌握 :focus-visible，就像掌握了一把开启更美好Web体验的钥匙。 它不仅能让你的网站更易于使用，还能让你在Web开发的世界里走得更远。 所以，快去尝试一下吧，让你的网站也拥有 :focus-visible 的魔力！
希望这篇文章能够帮助你更好地理解 :focus-visible，并将其应用到你的项目中。 记住，好的用户体验是成功的关键，而 :focus-visible 正是提升用户体验的重要一步。 让我们一起努力，创造更美好的Web世界！