Разница между :focus и :focus-visible в CSS заключается в том, как эти псевдоклассы обрабатывают фокус на элементах. 2

:focus применяет стили к любому элементу, который получает фокус, независимо от способа ввода. 2 Это включает события фокуса при навигации с клавиатуры, кликах мыши и сенсорном взаимодействии. 2

:focus-visible применяет стили только тогда, когда фокус должен быть видимым, например при использовании клавиатуры или вспомогательных технологий. 2 Обычно это происходит, когда пользователь навигации через клавиатуру, а не с помощью мыши или сенсорного ввода. 2

Таким образом, :focus обеспечивает визуальную индикацию фокуса при любом взаимодействии с элементом, а :focus-visible — только в случаях, когда это действительно необходимо, например при работе с клавиатурой. 25