Урок 27 · CSS

Фокус виден, но не мешает мышке

Человек на Tab должен видеть, где он находится. Рамка у каждого клика мышкой для этого не нужна.

Почему это следующий шаг

Состояния ссылки уже раскрашены. Следующий шаг — не потерять место на странице без мыши.

Как сделать

Селектор :focus-visible рисует outline только при клавиатурном фокусе. Не ставь outline: none само по себе. Если рисуешь свою рамку, замени стандартную на такую же заметную: цвет не сливается с фоном, толщина от 2 пикселей. Рамка не должна сдвигать соседей, поэтому outline здесь удобнее border.

:focus-visible {
  outline: 2px solid #2a62d9;
  outline-offset: 3px;
}

Что проверить

• Tab показывает рамку на ссылке и кнопке.
• Клик мышью не оставляет лишнюю рамку.
• Рамка не обрезана родителем с overflow.