寒假生活指导 08

更优雅的焦点提示：CSS :focus-visible 伪类

在网页可访问性设计中，焦点样式常被开发者忽略或粗暴移除。传统:focus伪类在为键盘操作提供视觉反馈时，会在鼠标点击时产生干扰性边框。focus-visible伪类的出现完美解决了这一矛盾。

原理剖析
浏览器会自动识别用户的交互方式。当使用键盘导航时自动应用:focus-visible样式，而鼠标点击时则不会触发。这种智能判断机制使交互反馈更加精准。

代码实现
/* 传统方案 - 同时影响键盘和鼠标 */
button:focus {
outline: 2px solid #4a90e2;
}

/* 现代方案 - 智能区分交互方式 */
button:focus-visible {
outline: 3px dashed #2ecc71;
outline-offset: 2px;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
}

对比优势
提升视觉体验：保留键盘导航必需的焦点提示，消除鼠标操作的视觉干扰
增强可访问性：符合WCAG 2.1标准，确保视障用户的操作反馈
样式扩展性：支持组合使用outline-offset、box-shadow等属性创建更丰富的视觉效果

兼容方案
对旧版浏览器可使用特性检测渐进增强：
button:focus-visible {
/* 现代浏览器样式 */
}

@supports not selector(:focus-visible) {
button:focus {
/* 备用样式 */
}
}
该特性已被Chrome 86+、Firefox 85+、Safari 15.4+等主流浏览器支持，建议在表单控件、导航菜单等关键交互元素中优先采用。