:focus

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

Элементы формы могут получить фокус и при клике мышкой на него. Например, если кликнуть по кнопке или в поле ввода текста, то им будет добавлен псевдокласс :focus.

Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

При попадании фокуса на кнопку будем показывать заметную белую обводку:

        
          
          button:focus {  outline: 2px solid #ffffff;  outline-offset: 3px;}
          button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов. Например, в Google Chrome вокруг элемента появляется прямоугольная фиолетовая рамка. Стили для неё:

        
          
          :focus {  outline: -webkit-focus-ring-color auto 1px;}
          :focus {
  outline: -webkit-focus-ring-color auto 1px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Важно! Не удаляйте стили для фокуса полностью. Если вам не нравятся дефолтные стили — измените их. При полном удалении фокуса пользователь не будет понимать, в какой части страницы он находится, если его сценарий пользования сайтом отличается от привычного.

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 В браузер встроены дефолтные стили для фокуса.

💡 Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

💡 Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт пользования интернетом — как минимум, некоторым людям. Например, на момент написания этой статьи на сайте «Алиэкспресс» отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту, используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент.

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

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

Если дизайнер не прорисовал в макете стили для фокуса, то вы можете оставить стандартные стили или аккуратно подобрать что-то подходящее под дизайн сайта.

+ Развернуть