Как правильно использовать :focus-visible?

Question

Accepted Answer

## Проблема :focus

`:focus` срабатывает и от мыши, и от клавиатуры. Дизайнеры часто снимают outline у всех — и ломают клавиатурную навигацию.

## Решение

`:focus-visible` — когда браузер считает фокус **стоит показать** (обычно Tab, не клик мышью).

```css
button:focus { outline: none; } /* опасно в одиночку */
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
```

Полифилы почти не нужны в современных браузерах. Для мыши можно оставить лёгкий hover, для клавиатуры — кольцо.

## Итог

Стилизуйте фокус через `:focus-visible`, а не удаляйте outline глобально без замены.