:focus-visible

通常我们会为交互元素定义 :focus 状态下的样式,以增强键盘可访问性。但在使用鼠标进行点击时,多数浏览器会使 <button> 等元素处于 :focus 状态。在多个按钮并列时,这容易使人产生「按钮被选中」的错觉。CSS Selectors Level 4 草案中的 :focus-visible 伪类选择器为我们提供了选择更精确的聚焦状态的能力。

Chrome 浏览器在默认状态下对 <button> 元素就有类似的处理。

:focus-visible 详细说明

使用

VEUI 的默认主题包 veui-theme-dls 依赖 :focus-visible 的 polyfill 才能提供最好的交互效果。使用时,需要自行在项目中进行引入:

import 'focus-visible'

严格来说 focus-visible 不能算一个真正的“polyfill”,因为在样式中我们无法直接使用 :focus-visible 这个伪类,而需要针对 .focus-visible 这个类编写样式。编写自定义样式时也需要注意这一点。

兼容性

当需要支持 IE9 时,由于 WICG 的 polyfill 不会自行引入其它 polyfill,故还需要引入 classList 的兼容脚本(需自行安装):

$ npm i --save classlist-polyfill
import 'classlist-polyfill'

示例

使用了 polyfill 以后 :focus 样式在鼠标、键盘激活时均会展现,而使用了 .focus-visible 样式仅在通过键盘激活时展现。

本例非 DLS 样式,仅作为示例。需注意对 :focus-visible 的处理在 Firefox 和 Safari 下无效,目前在这两个浏览器下点击不会使按钮处于 :focus 状态。

<template>
<article>
  <button>:focus</button> <button class="special">
    .focus-visible
  </button>
</article>
</template>

<style lang="less" scoped>
button {
  &:focus {
    outline: 2px solid #eee;
  }
}

.special {
  &:focus {
    outline: none;
  }

  &.focus-visible {
    outline: 2px solid #eee;
  }
}
</style>