:focus-visible

Выделяем элементы в фокусе только тогда, когда это действительно необходимо.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Псевдокласс :focus-visible используется, когда действительно нужно визуально выделить элементы в фокусе.

Пример

Секция статьи "Пример"

При попадании фокуса на кнопку будем показывать белую обводку. Обратите внимание, что мы сбросили стили для :focus, поэтому если установить фокус на кнопку, нажав на неё, обводки не будет. Но если использовать Tab, то обводка появится.

        
          
          button:focus {  outline: none;}.button:focus-visible {  border: 2px solid #FFFFFF;  outline: none;}
          button:focus {
  outline: none;
}

.button:focus-visible {
  border: 2px solid #FFFFFF;
  outline: none;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

После любого селектора ставим двоеточие и пишем ключевое слово focus-visible:

        
          
          a:focus-visible {  outline: 2px solid hotpink;}
          a:focus-visible {
  outline: 2px solid hotpink;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Зачем нужен этот :focus-visible, если есть :focus? Оба псевдокласса применяются, когда элемент в фокусе. Но отличие в том, что :focus-visible используется только тогда, когда браузер считает, что наличие фокуса на элементе необходимо обозначить визуально.

Например, людям при использовании мышки или тачпада не обязательно знать, что элемент в фокусе, но когда для навигации используется клавиатура, визуальное отображение фокуса просто необходимо.

Если же элемент подразумевает использование клавиатуры (например, <input>), то неважно, что использовалось для навигации до него, :focus-visible применится в любом случае.

Подсказки

Секция статьи "Подсказки"

💡 Изменить стандартное поведение фокуса можно с помощью атрибутов contenteditable и tabindex.