Focus css что это
:focus
Время чтения: меньше 5 мин
Обновлено 14 октября 2021
Кратко
Пример
При попадании фокуса на кнопку будем показывать точечную рамку красного цвета:
Как пишется
Как это понять
При попадании элемента в фокус браузер подставляет элементу дополнительный автоматический класс, чтобы пометить изменение состояния. Этому классу мы можем задавать любые стили, подходящие по дизайну. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.
Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов. Например, в Google Chrome вокруг элемента появляется прямоугольная фиолетовая рамка. Стили для неё:
Важно! Не удаляйте стили для фокуса полностью. Если вам не нравятся дефолтные стили — измените их. При полном удалении фокуса пользователь не будет понимать, в какой части страницы он находится, если его сценарий пользования сайтом отличается от привычного.
Подсказки
💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉
💡 В браузер встроены дефолтные стили для фокуса.
💡 Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.
На практике
Алёна Батицкая
🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт пользования интернетом — как минимум, некоторым людям. Например, на момент написания этой статьи на сайте «Алиэкспресс» отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту, используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент.
Не стоит думать, что абсолютно все, кто попадает в интернет, используют мышку для навигации. Есть люди с временно или постоянно ограниченными возможностями, которым гораздо комфортнее использовать для навигации по сайту клавиатуру. И они должны видеть, где именно в данный момент находится курсор.
Мы — разработчики — как создатели сайтов должны помнить, что пользовательские сценарии могут быть совершенно разные, и мы не в праве обделять ни одного из наших пользователей.
Если дизайнер не прорисовал в макете стили для фокуса, то вы можете оставить стандартные стили или аккуратно подобрать что-то подходящее под дизайн сайта.
Фокусы со стилями для фокуса
Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса.
Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.
Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.
Люди также живут не в вакууме. Иногда нашим привычным действиям противостоят окружающая среда и внешние факторы. Вы когда-либо застревали в доме своих родителей на время праздников, когда вам приходилось пользоваться их древним, но ещё рабочим настольным компьютером? Ну вот.
Как мышь, так и сенсорный ввод служат индикатором для взаимодействия. Для сенсора это ясно: палец — связующее звено между вашим разумом и предметом на экране, который ему нужно активировать. В случае мыши, курсор служит посредником для вашего пальца.
Однако, есть ещё множество других форм ввода. Клавиатуры есть повсюду и могут практически полностью заменить мышь или сенсорный ввод, если знать нужные клавиши для нажатия в правильном порядке. Иногда это проще и быстрее мыши!
Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить». Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.
Если обстоятельства мешают вам вводить информацию руками, то есть и другие варианты: манипуляторы, которые крепятся к голове или управляются ртом, кнопки-переключатели, устройства, управляемые вдуванием и вытягиванием воздуха из трубки, технологии распознавания голоса и отслеживания взгляда — всё это может служить для ввода в цифровой системе. Эти устройства идентифицируют область содержимого и активируют её. Напоминает хождение по ячейкам таблицы с помощью табуляции, когда ячейки подсвечиваются и готовы к редактированию. Это как по нажатию клавиши табуляции подсвечивается следующая ячейка в таблице, указывая на то, что в нее переместились для редактирования.
На этом видео, редактор видеороликов и консультант по доступности Кристофер Хилс демонстрирует возможности «Switch Control», программного обеспечения, помогающего людям с нарушением двигательной функции использовать аппаратные переключатели для работы со своими вычислительными устройствами.
Возможно это технология когда-нибудь пригодится и вам. К примеру, вы сломали обе руки, неудачно покатавшись на горном велосипеде, и хотите заказать что-нибудь вкусненькое с доставкой себе в утешение, пока вы поправляетесь. Или, скажем, едете за рулём и хотите безопасно написать эсэмэску своей семье. Или просто состаритесь. Навскидку полно и других примеров, просто люди обычно гонят от себя подобные мысли.
Если это интерактивно, этому нужен стиль фокуса
Не всегда известно, кто посещает наши сайты или приложения, причину их посещения, мотивы, время посещения, в каких условиях они находятся, какие эмоции испытывают, или какой ввод они могут использовать. Аналитика может помочь отчасти, но не даст полную картину. Было бы глупо ставить телегу впереди лошади и оптимизировать всю логику интерфейса лишь по этой обрывочной информации.
Также важно знать, что не все пользователи вспомогательных технологий хотят это афишировать. Да они и не обязаны. Продвинутые пользователи, использующие сочетания клавиш, специализированное программное обеспечение и браузерные расширения могут показаться пользователями вспомогательных технологий, но вполне могут и не быть инвалидами. Опять же, люди сложны!
Главное, дать эту возможность всем независимо ни от чего.
Идентификация и активация
:focus
Они довольно просты. Хотите обвести ссылку оранжевым, когда пользователь переведет на неё фокус? Вот как это описать:
Этот контур появится, когда кто-то переместится к ссылке, будь то клик, касание сенсора, переход клавишей Tab с клавиатуры или ввод с помощью кнопки-переключателя, чтобы выделить её.
Есть популярное заблуждение, будто к стилям фокуса можно применить только свойство outline Отмечу, что :focus — это такой же селектор, как и любой другой, а значит, он принимает любые CSS-свойства. Я люблю играть с фоновым цветом, подчёркиванием и другими приемами, не влияющими на текущий размер компонента, чтобы не сдвигать раскладку страницы при активации селектора.
Затем, скажем, нужно удалить подчёркивание активированной ссылки, чтобы сообщить о смене состояния. Помните: ссылки используют подчёркивание!
Важно, чтобы все изменения состояния — из обычного в состояние под фокусом, а оттуда в активное — различались. Это значит, что каждый переход должен быть уникальным по сравнению с другими состояниями компонента, указывая пользователю на изменение.
Смена состояния также не должна ограничиваться лишь сменой цвета — не забывайте о людях с дальтонизмом и/или плохим зрением. Вот как изменение только лишь состояния цвета может выглядеть для человека с дейтеранопией, или неспособностью различать красный и зеленый цвета:
Чтобы лучше проиллюстрировать проблему, я намеренно удалил подчёркивание и браузерную нативную обводку фокуса из ссылки на видео. Если перебирать всё интерактивное на странице клавишей Tab, эту ссылку можно сразу и не заметить. Если человек не различает цвета, он не увидит и изменения ее состояния при наведении, а если у него к тому же катаракта — то и подавно.
:focus-within
:focus-within — связанный с фокусом селектор псевдокласса, название которого, «фокус внутри», звучит очень по-дзенски — может применять стили к родительскому элементу, когда один из его дочерних элементов получает фокус.
Типичный случай, когда этот селектор может быть нужен — если надо применить стили ко всей форме, когда один из элементов input в ней получает фокус. В примере ниже я плавно увеличиваю размер всей формы, если только пользователь не пожелал ограничить анимации до минимума.
Этот селектор по-прежнему относительно новый, поэтому я уверен, что со временем найдется гораздо больше интересных вариантов его использования.
Взгляды
У людей также есть мнения. К сожалению, порой эти мнения не подкреплены знаниями. Среди людей, не занимающихся доступностью, господствует мнение, что стили фокуса «безобразны», и многие дизайнеры и разработчики удаляют их ради внешнего лоска. А порой они даже не подозревают, что распространяют чужое мнение — многие CSS-сбросы включают глобальное удаление стилей фокуса, и включаются в проект в качестве фундаментальной зависимости, как что-то само собой разумеющееся.
Это решение исключает людей. Сайты и приложения — это не предметы роскоши, которые в отрыве от контекста должны красоваться у вас в портфолио, и не статичные скриншоты в складной корпоративной презентации. Они нужны, чтобы их читали и пользовались ими, и есть правила, которые помогут максимально возможному количеству людей делать именно это.
:focus-visible
Псевдокласс :focus-visible срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.
На видеозаписи этого примера с Codepen видно, как в зависимости от того, каким способом пользователь выбирает ссылку, к ней применяются разные стили. При наведении и клике по ссылке мышью удаляется её подчёркивание, а сама она немного сдвигается вниз. При переходе к ней клавишей Tab с клавиатуры :focus-visible вместо этого применяет к ссылке яркий цвет фона.
Шаг вперёд, шаг назад
С браузерной поддержкой не всё гладко — одними лишь Chrome и Firefox веб не ограничивается. Пусть полифил отлично справляется там, где нет нативной поддержки, мы всё равно загружаем лишние данные, получаем дополнительную сложность в поддержке и более хрупкий код.
Также стоит отметить, что теперь нет такого четкого противопоставления двух классов устройств по типу ввода, как было раньше. Флагманский компьютер Surface от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и сенсорную функциональность из коробки. Исследование использования скринридеров WebAIM в 2017 г. показало, что мобильные устройства могут дополняться клавиатурным вводом чаще чем вы думаете. Эвристика — это хорошо, но как и аналитика, она не даёт полной картины.
Стоит учесть еще и то, что пользователям с мышкой тоже бывают нужны стили для фокуса. Эти стили — чёткий и однозначный признак интерактивности, что даёт большое преимущество людям с плохим зрением, когнитивными проблемами, и людям, которые не очень дружат с техникой. Особо продвинутые пользователи, которые не понаслышке знают, что скринридеры и горячие клавиши — это как Vim по сравнению с графическими оболочками, захотят, чтобы состояние фокуса было очевидным, ведь они порхают по экрану, используя клавиатуру.
Залог надёжного и устойчивого веба — это крепкая базовая функциональность, работающая в любом браузере. У ванильного селектора :focus настолько широкая поддержка, что можно быть уверенным, что даже экзотические браузеры его поймут.
В мире полно вещей, которые одним кажутся безобразными, а другим красивыми. Лично для меня стили фокуса не помеха. Как дизайнеру, мне кажется, что это необходимая часть создания зрелой системы дизайна. Как для разработчика, описывать состояние для меня — привычная работа. Как человеку, мне нравится сохранять интернет открытым и доступным, каким он и должен быть.
Если есть желание продвинуться в этой теме ещё дальше, дизайнер интерфейсов Кэйтлин Джийер отлично написала про индикаторы фокуса.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
Доступные индикаторы фокуса в CSS: Кое-что, что следует принимать во внимание
Дата публикации: 2018-06-11
От автора: фокус — это странное кольцо, которое появляется, когда вы промахиваетесь мимо клавиши caps и нажимаете вместо этого клавишу табуляции. Это то, о чем я два года назад особо не задумывался. Он просто не был важен для моих проектов дизайна. Но со временем, когда я начал работать над тем, чтобы сделать свои проекты более доступными, я обнаружил, что в CSS фокус не только обеспечивает доступность, но и дает возможность изучить весь подход вашей компании к дизайну.
В этой статье мы рассмотрим более сложные методы проектирования, которые вы можете использовать, чтобы сделать дизайн фокуса более привлекательным.
Почему фокус имеет значение?
Основная цель фокуса — дать пользователю руководство. Рассмотрим пользователя, который может использовать только клавиатуру для перемещения по вашему приложению. Будет ли фокус соответствовать визуальному стилю элемента или тому, как ведет себя этот элемент? Будет ли он визуально выделен вообще? Задача фокуса заключается в том, чтобы указать, с каким элементом пользователь в настоящее время имеет дело: это кнопка или блок текста?
Для пользователя со слабым зрением или слепого внешний вид вашего приложения может не иметь значения, поскольку они, вероятно, будут использовать определенные вспомогательные технологии (AT), такие как устройство чтения с экрана, чтобы помочь им перемещаться в приложении. Тем не менее, для пользователей, которые могут видеть экран, внешний вид имеет значение. Это шаблон, как и любой другой элемент, который вы разрабатываете, и он должен быть согласованным. Ваш фокус показывает пользователю, что является «кликабельным», и это помогает определить, что это за элемент.
Кроме того, фокус интересно разрабатывать. Разработав до этого сотни состояний наведения и клика, было неожиданно вдруг обнаружить и спроектировать это состояние, которое я как-то полностью упускал из виду. Я начал видеть многие мои «законченные» шаблоны в новом свете. Как и многие другие псевдоклассы в CSS, его можно стилизовать и переопределить по вашему усмотрению — то, что вы можете сделать, ограничено только вашей фантазией.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Фокус по умолчанию
Прежде чем вы начнете творить сумасшедшие вещи и задавать причудливые фокусы для каждого шаблона, подумайте о том, каким будет ваш фокус по умолчанию. Это фокус, который будет применен ко всему вашему приложению и будет использоваться в качестве резервного варианта, если вы не укажете для объекта пользовательский фокус. Ваш фокус по умолчанию должен быть четко виден на фоне приложения, он должен соответствовать рекомендациям по цветовому контрасту, и он должен вписываться в цветовую палитру.
Давайте рассмотрим фокус по умолчанию для нашей библиотеки шаблонов:
Фокусировка: focus/blur
Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.
Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.
В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.
События focus/blur
Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.
Используем их для валидации(проверки) введённых данных.
Методы focus/blur
Методы elem.focus() и elem.blur() устанавливают/снимают фокус.
Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:
Это сработает во всех браузерах, кроме Firefox (bug).
Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.
Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.
Потеря фокуса может произойти по множеству причин.
Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:
Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.
Используя эти события, нужно быть осторожным. Если мы хотим отследить потерю фокуса, которую инициировал пользователь, тогда нам следует избегать её самим.
Включаем фокусировку на любом элементе: tabindex
Многие элементы по умолчанию не поддерживают фокусировку.
С другой стороны, элементы форматирования
При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.
Есть два специальных значения:
tabindex=»-1″ позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.
Например, список ниже. Кликните первый пункт в списке и нажмите Tab :
События focusin/focusout
События focus и blur не всплывают.
Например, мы не можем использовать onfocus на
У этой проблемы два решения.
Первое: забавная особенность – focus/blur не всплывают, но передаются вниз на фазе перехвата.
Второй рабочий вариант:
Итого
События focus и blur срабатывают на фокусировке/потере фокуса элемента.
Помощь с применением focus для input в css
Как задать focus так, чтобы при нажатии на поле для ввода Name, Email или Message текст заглушка исчезал. То бишь, чтобы focus сработал на текст заглушку и присвоил ему opacity 0.
4 ответа 4
Это решается с помощью свойств active и focus у элемента input. Мы просто узнаем, когда инпут переходит в такие состояния и меняем свойства плейсхолдера.
Тут используется смежный селектор +, про его свойства можно подробнее почитать например здесь:http://codeharmony.ru/materials/42
Еще можно добавить немного анимации, например вот так
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 или задайте свой вопрос.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.