:focus-visible

Псевдокласс :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.