CSS焦点环（Focus Ring）定制：`:focus-visible`的启发式算法与输入方式检测

大家好，今天我们来深入探讨一个看似简单，实则涉及不少复杂逻辑的CSS特性：:focus-visible。在网页可访问性中，焦点环起着至关重要的作用，它能帮助键盘用户明确当前焦点所在，从而实现有效的页面导航。然而，传统的:focus伪类在所有获得焦点的元素上都会显示焦点环，这在鼠标点击等非键盘交互场景下往往显得多余，甚至影响用户体验。 :focus-visible的出现正是为了解决这个问题，它允许我们只在键盘导航时才显示焦点环，从而提供更智能、更友好的用户体验。

为什么需要`:focus-visible`？

传统的:focus伪类，无论元素是通过鼠标点击、触摸还是键盘导航获得焦点，都会触发焦点环的显示。这种行为在键盘用户看来是必要的，因为它提供了视觉反馈，帮助他们了解当前键盘操作的目标。然而，对于使用鼠标或触摸屏的用户来说，焦点环的出现往往是不必要的，甚至会分散他们的注意力，降低用户体验。

例如，考虑一个包含多个按钮的工具栏。如果用户使用鼠标点击其中一个按钮，按钮会获得焦点，:focus伪类会触发焦点环的显示。此时，用户已经通过视觉确认了按钮被点击，焦点环的出现显得有些多余，甚至会干扰用户对工具栏其他按钮的视觉感知。

:focus-visible的出现就是为了解决这个问题。它通过一套复杂的启发式算法来判断焦点是否是通过键盘导航获得的。如果是，则触发焦点环的显示；否则，不显示。这样，我们就可以只在必要的时候显示焦点环，从而提供更智能、更友好的用户体验。

`:focus-visible`的工作原理：启发式算法

:focus-visible的行为并非简单地检测键盘事件。它使用一套复杂的启发式算法，综合考虑多种因素来判断焦点是否是通过键盘导航获得的。这套算法的具体实现细节因浏览器而异，但通常包括以下几个方面：

键盘事件检测： 这是最基本的判断依据。如果元素在最近一段时间内响应了键盘事件（例如 keydown, keyup），则很可能焦点是通过键盘导航获得的。
鼠标事件检测： 如果元素在获得焦点之前响应了鼠标事件（例如 mousedown, mouseup, click），则很可能焦点是通过鼠标点击获得的。
触摸事件检测： 类似于鼠标事件，如果元素在获得焦点之前响应了触摸事件（例如 touchstart, touchend），则很可能焦点是通过触摸获得的。
焦点来源： 浏览器会记录焦点的来源。例如，如果焦点是通过 element.focus() 方法获得的，则浏览器可以判断焦点是否是由脚本控制的。
用户代理（UA）的默认样式： 一些浏览器会根据用户代理的默认样式来决定是否显示焦点环。例如，某些移动浏览器可能默认禁用焦点环，以提供更简洁的用户界面。

:focus-visible的算法会将以上这些因素综合考虑，并根据一定的权重来判断焦点是否是通过键盘导航获得的。这个算法并非完美，有时可能会出现误判，但它在大多数情况下都能提供令人满意的结果。

需要注意的是，:focus-visible的算法是不断演进的。浏览器厂商会根据用户反馈和实际应用场景，不断优化这套算法，以提高其准确性和可靠性。

`:focus-visible`的使用方法：CSS定制

:focus-visible伪类的使用方法非常简单，与:focus伪类类似。我们可以使用它来定制焦点环的样式，使其更符合我们的设计需求。

/* 默认情况下，不显示焦点环 */
:focus {
  outline: none; /* 移除浏览器默认的焦点环 */
}

/* 只有在键盘导航时才显示焦点环 */
:focus-visible {
  outline: 2px solid blue; /* 自定义焦点环样式 */
}

在上面的代码中，我们首先使用 outline: none 移除了浏览器默认的焦点环。然后，我们使用 :focus-visible 伪类来定义自定义的焦点环样式。这样，只有在键盘导航时，元素才会显示蓝色的焦点环。

我们可以根据自己的设计需求，定制焦点环的颜色、粗细、样式等。例如，我们可以使用 box-shadow 属性来创建一个更柔和的焦点环效果：

:focus-visible {
  outline: none; /* 移除浏览器默认的焦点环 */
  box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.5); /* 自定义焦点环样式 */
}

我们还可以使用 :focus-visible 伪类来改变元素的背景颜色、字体颜色等，以提供更明显的视觉反馈：

button:focus-visible {
  background-color: lightblue;
  color: black;
}

:focus-visible 伪类可以与其他CSS选择器结合使用，以实现更精细的控制。例如，我们可以只在特定类型的元素上显示焦点环：

input[type="text"]:focus-visible {
  outline: 2px solid green;
}

JavaScript辅助：输入方式检测

虽然:focus-visible伪类已经能很好地处理大多数情况，但在某些特殊场景下，我们可能需要使用JavaScript来辅助判断用户的输入方式。例如，我们可能需要根据用户的设备类型（例如，平板电脑、笔记本电脑）或用户的偏好设置来决定是否显示焦点环。

以下是一个使用JavaScript来检测用户输入方式的示例：

function isKeyboardInput() {
  // 如果最近一段时间内发生了键盘事件，则认为是键盘输入
  if (document.body.classList.contains('using-keyboard')) {
    return true;
  }

  // 如果最近一段时间内发生了鼠标事件或触摸事件，则认为不是键盘输入
  if (document.body.classList.contains('using-mouse') || document.body.classList.contains('using-touch')) {
    return false;
  }

  // 如果无法确定，则返回null
  return null;
}

// 监听键盘事件，添加 'using-keyboard' 类
document.addEventListener('keydown', () => {
  document.body.classList.add('using-keyboard');
  document.body.classList.remove('using-mouse');
  document.body.classList.remove('using-touch');

  // 移除类，避免影响后续判断
  setTimeout(() => {
    document.body.classList.remove('using-keyboard');
  }, 100); // 100ms后移除
});

// 监听鼠标事件，添加 'using-mouse' 类
document.addEventListener('mousedown', () => {
  document.body.classList.add('using-mouse');
  document.body.classList.remove('using-keyboard');
  document.body.classList.remove('using-touch');
  setTimeout(() => {
    document.body.classList.remove('using-mouse');
  }, 100);
});

// 监听触摸事件，添加 'using-touch' 类
document.addEventListener('touchstart', () => {
  document.body.classList.add('using-touch');
  document.body.classList.remove('using-keyboard');
  document.body.classList.remove('using-mouse');
  setTimeout(() => {
    document.body.classList.remove('using-touch');
  }, 100);
});

// 根据输入方式来决定是否显示焦点环
const elements = document.querySelectorAll('.focusable');
elements.forEach(element => {
  element.addEventListener('focus', () => {
    const inputMethod = isKeyboardInput();
    if (inputMethod === true) {
      element.classList.add('keyboard-focus');
    } else {
      element.classList.remove('keyboard-focus');
    }
  });

  element.addEventListener('blur', () => {
    element.classList.remove('keyboard-focus');
  });
});

/* 默认情况下，不显示焦点环 */
.focusable:focus {
  outline: none; /* 移除浏览器默认的焦点环 */
}

/* 只有在键盘导航时才显示焦点环 */
.focusable.keyboard-focus {
  outline: 2px solid blue; /* 自定义焦点环样式 */
}

在上面的代码中，我们使用 JavaScript 监听了键盘、鼠标和触摸事件，并根据事件类型在 document.body 上添加相应的类。然后，我们定义了一个 isKeyboardInput() 函数，该函数根据 document.body 上的类来判断用户的输入方式。最后，我们监听了元素的 focus 事件，并根据输入方式来决定是否添加 keyboard-focus 类，从而控制焦点环的显示。

这种方法比纯 CSS 的 :focus-visible 更加灵活，但同时也更加复杂。在实际应用中，我们需要根据具体的需求来权衡两种方法的优缺点。

无障碍（Accessibility）考虑

在使用 :focus-visible 时，我们需要始终牢记无障碍（Accessibility）的重要性。焦点环是键盘用户导航网页的重要视觉线索，因此我们需要确保焦点环的样式足够醒目，易于识别。

以下是一些无障碍方面的建议：

对比度： 焦点环的颜色应与背景颜色形成足够的对比度，以确保视力障碍用户也能清晰地看到焦点环。我们可以使用在线对比度检查工具来验证焦点环的对比度是否符合 WCAG 标准。
大小： 焦点环的粗细应足够，以确保用户能够轻松地看到焦点环。建议焦点环的粗细至少为 2px。
样式： 焦点环的样式应清晰明了，避免使用过于花哨或复杂的样式。简单的边框或阴影通常是最佳选择。
一致性： 焦点环的样式应在整个网站中保持一致，以避免用户感到困惑。
键盘可访问性测试： 使用键盘浏览网站，确保所有可交互元素都能获得焦点，并且焦点环能够清晰地显示。

我们可以通过以下表格来总结一些无障碍方面的最佳实践：

方面	建议
对比度	焦点环颜色与背景颜色对比度至少为 4.5:1（WCAG AA 标准）或 7:1（WCAG AAA 标准）
大小	焦点环粗细至少为 2px
样式	使用清晰明了的样式，避免过于花哨或复杂的样式
一致性	焦点环样式在整个网站中保持一致
测试	使用键盘浏览网站，确保所有可交互元素都能获得焦点，并且焦点环能够清晰地显示

兼容性问题与polyfill

:focus-visible 的兼容性相对较好，现代浏览器基本都支持。但是，对于一些老旧的浏览器，可能需要使用 polyfill 来提供支持。

一个常用的 :focus-visible polyfill 是 focus-visible 包。我们可以通过 npm 安装它：

npm install focus-visible

然后在 JavaScript 代码中引入该 polyfill：

import 'focus-visible';

该 polyfill 会自动检测浏览器是否支持 :focus-visible，如果不支持，则会使用 JavaScript 来模拟 :focus-visible 的行为。

需要注意的是，polyfill 可能会对性能产生一定的影响。因此，我们应该尽量避免在支持 :focus-visible 的浏览器中使用 polyfill。

总结要点

总而言之，:focus-visible 是一个强大的CSS伪类，它允许我们更智能地控制焦点环的显示，从而提供更友好的用户体验。我们可以通过CSS定制焦点环的样式，使其更符合我们的设计需求。在某些特殊场景下，我们可能需要使用JavaScript来辅助判断用户的输入方式。在使用 :focus-visible 时，我们需要始终牢记无障碍的重要性，确保焦点环的样式足够醒目，易于识别。

掌握这些知识点，能让你编写出更具可访问性且用户体验更好的网页应用。 :focus-visible的合理使用，使得网站在不同输入方式下都能提供最佳的视觉反馈。最终目标是为所有用户创造一个更易于使用的网络环境。

更多IT精英技术系列讲座，到智猿学院