CSS - :focus-visible伪类

CSS 中的:focus-visible伪类表示已获得焦点的元素。此类通常在用户单击、点击元素或使用键盘的 Tab 键选择元素时触发。

:focus-visible伪类可用于根据用户首选的操作模式（使用鼠标或键盘）应用不同的焦点指示器。

语法

:focus-visible {
   /* ... */
}

:focus 与 :focus-visible

CSS 中的:focus 和:focus-visible伪类用于定位当前具有键盘焦点的元素，但它们的行为有所不同，尤其是在用户体验和可访问性方面。

:focus	:focus-visible
定位具有键盘焦点的元素，无论该焦点是通过键盘导航还是通过鼠标单击获得。	定位具有键盘焦点的元素，但仅在使用键盘导航时可见。它有助于通过确保仅在通过键盘输入聚焦元素时才应用样式（而不是通过鼠标或触摸输入聚焦时）来改善用户体验。
它不考虑用户如何到达聚焦的元素，因此可能包括用户使用鼠标单击或在触摸设备上点击元素的情况。	它对于为键盘用户创建更易访问和用户友好的体验特别有用，因为它避免了在使用鼠标单击元素时应用可能分散注意力或不相关的样式。
a:focus { // Styles for elements //that have keyboard focus }	button:focus-visible { //Styles for elements //that have keyboard focus //and are visible through //keyboard navigation }

CSS :focus-visible 示例

让我们看一个显示:focus 和:focus-visible区别的示例。尝试使用鼠标以及键盘将焦点放在按钮上，并查看区别。

<html>
<head>
<style> 
   /* Apply focus styles only when accessed via keyboard navigation */
   button:focus-visible {
      outline: 2px solid green;
      background-color: yellow;
      }

   /* Apply focus styles for all focused elements */
   button:focus {
      outline: 3px solid blue;
   }
</style>
</head>
<body>
   <div>
      <button>focus-visible</button>
      <button>focus-only</button>
   </div>
</body>
</html>

以下是一个button的经典示例，它展示了选择器:focus-visible如何区别于:focus。我们通常不希望在单击button后看到焦点环，但我们希望在使用键盘浏览网站时在button上看到焦点指示器。在下面的示例中，尝试使用键盘并按 Tab 键，看看:focus-visible如何帮助我们通过键盘和 Tab 键解决焦点环问题。

<html>
<head>
<style>
   label {
      display: grid;
      font-size: 18px;
      color: black;
      width: 400px;
   }

   select {
      padding: 10px 16px;
      font-size: 16px;
      color: black;
      background-color: #fff;
      border: 1px solid #597183;
      border-radius: 8px;
      margin-top: 25px;
      width: 300px;
      transition: all 0.3s ease;
   }

   .focus-only:focus {
      outline: 3px solid orange;
   }

   .focus-visible-only:focus-visible {
      outline: 4px dashed aqua;
   }
</style>
</head>
<body>
    <p>Compare what happens when you click on buttons with a mouse, versus when you tab through them using a keyboard. </p>
   <button class="focus-only"> focus-only button</button><br><br>
   <button class="focus-visible-only"> focus-visible button</button><br><br>
</body>
</html>

CSS :focus - 后备

使用@supports检查:focus-visible的浏览器支持和兼容性，并在:focus规则中重复相同的样式，无论它在旧浏览器中是否正常工作。即使您完全没有为:focus指定任何内容作为后备选项，旧浏览器也会显示本机默认轮廓。这在下面的语法中得到演示

button:focus { /* some exciting button focus styles */ }

@supports (:focus-visible) {
      button:focus { /* undo all the above focused button styles */ }
      button:focus-visible { /* and then reapply the styles here instead */ }
}

打印页面