CSS 仅在键盘使用时（或按下Tab键）启用:focus

在本文中，我们将介绍如何使用CSS来仅在键盘使用时（或按下Tab键）启用:focus伪类。这对于可访问性和用户体验尤为重要，因为这样可以确保网站或应用程序在使用键盘导航时能够正常工作。

阅读更多：CSS 教程

使用:focus伪类

:focus伪类用于选择当前具有焦点的元素。当用户点击或使用Tab键在元素上导航时，元素将获得焦点，并且可以通过应用CSS样式来提供视觉反馈。然而，某些情况下，我们可能只希望在通过键盘导航时应用:focus样式，而不希望在点击元素时应用它。

为了实现这一点，可以使用:focus-visible伪类。:focus-visible伪类仅在键盘导航时才应用，而不在点击元素时应用。这样可以确保样式只在用户通过键盘导航时才生效。

下面是一个例子，演示如何使用:focus-visible伪类在键盘导航时高亮显示链接：

a {
  color: blue;
}

a:focus-visible {
  outline: 2px solid blue;
}

在这个例子中，当用户通过Tab键导航到链接时，链接将获得焦点，并且将应用一个蓝色的边框。而当用户使用鼠标点击链接时，:focus-visible样式将不会应用。

支持:focus-visible的浏览器

尽管:focus-visible是CSS规范的一部分，但并不是所有的浏览器都支持它。目前，只有一些浏览器已经实现了:focus-visible，包括Chrome、Firefox和Safari。

为了确保在不支持:focus-visible的浏览器上的向后兼容性，可以使用:focus加上:active伪类来定义:focus样式。这样可以确保在所有情况下，当元素被点击或通过键盘导航时，都会应用:focus样式。

下面是一个示例，展示如何同时使用:focus和:active伪类来定义:focus样式：

a:focus,
a:active {
  outline: 2px solid blue;
}

在这个例子中，无论用户是通过点击链接还是通过键盘导航到链接，链接都会获得焦点，并且将应用一个蓝色的边框。

使用JavaScript支持:focus-visible

如果您希望在所有的浏览器中都能够支持:focus-visible，您可以使用JavaScript来模拟:focus-visible的效果。以下是一个基本的JavaScript解决方案示例：

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 9) { // Tab键的keyCode是9
    document.body.classList.add('focus-visible');
  }
});

document.addEventListener('mousedown', function() {
  document.body.classList.remove('focus-visible');
});

在这个例子中，当用户按下Tab键时，我们将给body元素添加一个名为focus-visible的class。而当用户点击页面其他地方时，我们将从body元素中移除focus-visible类。接下来，您可以根据focus-visible类来定义相应的CSS样式。

使用这个JavaScript解决方案，即使在不支持:focus-visible的浏览器中，您也可以通过键盘导航正常地应用:focus样式。

总结

本文介绍了如何使用CSS来仅在键盘使用时（或按下Tab键）启用:focus伪类。我们了解到，可以使用:focus-visible在仅通过键盘导航时应用:focus样式，而不在点击元素时应用它。还了解到在一些不支持:focus-visible的浏览器中，可以使用:focus加上:active伪类来定义:focus样式。此外，我们还了解到可以使用JavaScript来在所有浏览器中支持:focus-visible。

通过使用这些技术，可以确保我们的网站或应用程序在使用键盘导航时能够提供良好的用户体验和可访问性。