CSS селектор :focus-visible — рамка фокуса лише з клавіатури

CSS псевдоклас :focus-visible спрацьовує лише тоді, коли фокус варто показати: при навігації з клавіатури — так, після кліку мишею — ні.

правити

Загальний опис

Роками верстальники писали outline: none, бо рамка навколо кнопки після кліку виглядала негарно. І тим самим ламали сайт для тих, хто ходить по ньому клавішею Tab: людина просто не бачила, де вона.

:focus-visible розв'язує цей конфлікт: браузер сам вирішує, чи був фокус «навмисним». Мишкою клікнув — рамки немає. Прийшов табом — рамка є.

правити

Порада

Ніколи не прибирай outline зовсім. Якщо стандартна рамка не подобається — заміни її на свою у правилі :focus-visible.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:focus-visible

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
focus-visible	86+	85+	15.4+	72+	86+	-

Підтримка: мобільні переглядачі

Переглядач
focus-visible	86+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<button>Клацни мене або прийди сюди клавішею Tab</button>

button:focus-visible {
    outline: 3px solid #0172ad;
    outline-offset: 2px;
}