Что такое focus в css
Обработка наведения, фокусировки и других состояний
Использование утилит для стилизации элементов при наведении, фокусе и т. д.
Каждый служебный класс в Tailwind может применяться условно путем добавления модификатора в начало имени класса, описывающего условие, которое вы хотите настроить.
Например, чтобы применить класс bg-sky-700 при наведении курсора, используйте класс hover:bg-sky-700 :
Наведите указатель мыши на эту кнопку, чтобы увидеть изменение цвета фона
При написании CSS традиционным способом одно имя класса будет делать разные вещи в зависимости от текущего состояния.
Традиционно одно и то же имя класса применяет разные стили при наведении курсора
В Tailwind вместо добавления стилей для состояния наведения к существующему классу вы добавляете еще один класс к элементу, который только что-то делает при наведении курсора.
В Tailwind отдельные классы используются для состояния по умолчанию и состояния наведения
Это то, что мы имеем в виду, когда говорим, что служебный класс может применяться условно — с помощью модификаторов вы можете точно контролировать поведение вашего дизайна в различных состояниях, не покидая HTML-кода.
Tailwind включает в себя модификаторы практически для всего, что вам когда-либо понадобится, в том числе:
Эти модификаторы могут быть даже сложены для более конкретных ситуаций, например, изменение цвета фона в темном режиме, в средней контрольной точке, при наведении курсора:
В этом руководстве вы узнаете обо всех модификаторах, доступных во фреймворке, о том, как использовать их с вашими собственными пользовательскими классами и даже о том, как создавать свои собственные.
Попробуйте взаимодействовать с этой кнопкой, чтобы увидеть наведение, фокус и активное состояние
Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.
Стилизуйте элемент, когда он является первым или последним дочерним элементом, используя модификаторы first и last :
Фокусировка на стилях focus CSS
Дата публикации: 2018-04-11
От автора: не все просматривают интернет с помощью мыши. Если вы читаете эту статью на смартфоне, вот вам и пример! Стоит отметить, что люди используют и другие формы ввода. Этим формам нужны стили focus CSS.
Люди сложные. Мы не всегда выполняем одно и то же действие одинаково, мы не всегда принимаем решения, которые имеют смысл, глядя со стороны. Иногда мы вообще делаем что-либо просто… чтобы делать что-то. Нам быстро становится скучно: мы возимся, откапываем и подталкиваем вещи, кастомизируем их, чтобы они лучше подходили под наши нужды, независимо от их предназначения.
Люди смертны. Мы можем заболеть, нас можно ранить. Иногда и то и другое. Иногда это на какое-то время, иногда – постоянно. Это значит, что иногда мы не в состоянии делать то, что мы хотим или так, как мы это привыкли делать.
Люди живут в мире. Иногда мы попадаем в окружение, внешние факторы которого сговорились помешать нам сделать что-то так, как мы привыкли это делать. Вы когда-нибудь застревали дома у родителей на праздники, и вам приходилось использовать их старый, но все еще рабочий компьютер? Вот так бывает.
Мышь и ввод через касание предоставляют индикатор для взаимодействия. Для касания все очевидно: ваш палец служит мостом, соединяющим ваши мысли с элементами на экране, которые нужно активировать. У мыши курсор замещает ваш палец.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Однако это не единственные формы ввода, доступные нам. Всегда есть клавиатуры, которые способны на все то, что может мышь и ввод касанием, если вы знаете все правильные клавиши и их порядок. Иногда это даже быстрее и легче, чем использовать мышь!
Подумайте, когда вы последний раз пользовались копированием, вставкой и сохранением? Может, вы работали с таблицей? Вы переключались между вводом мышью и вводом клавиатурой для максимально эффективного ввода? Скорее всего, вы не обращали внимания на это, но это хороший пример переключения ввода налету для наилучшего достижения цели. Возможно вы даже успели немного «расслабиться» и поставить лайк в facebook на смартфоне.
Если вы не можете использовать руки, вам доступны другие варианты: палочки, переключатели, устройства зажима и стяжки, распознавание речи и технология отслеживания глаз могут быть способом ввода в цифровой системе. Эти устройства определят область контента и активируют ее. Это похоже на нажатие Tab на клавиатуре, и после этого подсвечивается следующая ячейка в таблице, показывая, что на нее перешел фокус, и она готова к редактированию.
На видео выше видео редактор и консультант по доступности Christopher Hills демонстрирует возможности Switch Control, ПО, помогающего людям с нарушениями моторики использовать аппаратные переключатели для управления вычислительными устройствами.
Нужно отметить, что когда-нибудь вам могла бы понадобиться эта технология, даже если чуть-чуть. Может, вы сломаете обе руки, катаясь на горном велосипеде, и захотите заказать себе что-нибудь, пока выздоравливаете. А может, вы за рулем и хотите безопасно написать текст своей семье. Или вы постарели. Несложно придумать другие примеры, люди любят поразмышлять.
Если это интерактивно, у него должны быть стили focus
Мы не можем знать, кто посещает наши сайты и веб-приложения, зачем они это делают, что они будут делать там, каких условий они ожидают, что они чувствуют или какой способ ввода они могут использовать. Это могут подсказать аналитики, но и они не составят всю картину. Было бы глупо, если бы хвост вилял собакой. Поэтому оптимизировать весь опыт на основе ограниченной информации тоже глупо.
Важно знать, что не все, кто использует вспомогательные технологии, хотят, чтобы их считали пользователями, которые используют вспомогательные технологии. Они не хотят раскрывать это. Продвинутые пользователи – люди, которые используют сочетания клавиш, специализированное ПО и расширения браузера – могут, как правило, перемещаться как пользователи со вспомогательными технологиями и не быть инвалидами. Люди сложные!
Мы можем создать предварительный опыт, который работает для всех, независимо от возможностей и обстоятельств.
Определение и активация
:focus
Как с помощью альтернативных форм ввода определить что-то, чтобы показать, что это можно активировать? К счастью, эту проблему решил CSS – необходимо использовать селекторы :focus и :active.
Синтаксис простой. Хотите обводить ссылку оранжевым, когда пользователь получил ее фокус? Как это сделать:
Обводка появится, когда пользователь переведет на ссылку фокус, будь-то клик или нажатие пальцем, нажатие Tab на клавиатуре или переключатель.
Распространенное неправильное понятие, что focus стили могут использовать только свойство outline. :focus – это селектор, как и любой другой. Значит, он принимает весь диапазон CSS свойств. Мне нравится играться с цветом фона, подчеркиванием и другими техниками, которые не меняют текущий размер компонента, тем самым не сдвигая макет страницы при активации селектора.
Затем, например, мы хотим удалить подчеркивание ссылки при активации, чтобы сообщить о сдвиге состояния. Не забывайте: ссылки используют подчеркивания!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Важно убедиться, что изменения состояния отличаются друг от друга: от resting до focused до activated. То есть каждый переход должен быть уникальны по сравнению с другими состояниями компонента, чтобы пользователь понял, что произошло изменение.
Мы также хотим убедиться, что эти изменения состояния полагаются не только на цвет, чтобы лучше подстраиваться под людей с дальтонизмом и/или плохим зрением. Ниже показано, как только цветовое изменение состояния видит человек с дейтеронопией или красно-зеленым дальтонизмом:
Я специально удалил подчеркивание и нативное фокусное кольцо браузера со ссылки в видео, чтобы лучше проиллюстрировать проблему. Если нажимать Tab, чтобы определить интерактивные элементы страницы, не сразу становится понятно, что здесь присутствует ссылка. Если учитывать дальтонизм, то изменение состояния при наведении курсора не будет очевидным, это также касается людей с катарактой.
:focus-within
:focus-within – focus псевдокласс с очень «умиротворительным» названием – может применять стили к родителю, когда один из его дочерних элементов получает фокус. Событие focus всплывает до тех пор, пока не наткнется на CSS правило, которое просит применить стили.
Общий пример использования такого селектора – применение стилей ко всей форме, когда одно из ее полей получает фокус. В примере ниже я немного увеличиваю размер всей формы, если пользователь не изъявил желания отказаться от анимации:
Этот селектор относительно новый. Уверен, что со временем мы получим больше умных приложений.
Политика
У людей есть мнение. К сожалению, иногда они об этом не знают. Вне практики доступности есть преобладающее представление о том, что стили focus «страшные», и многие дизайнеры и разработчики удаляют их ради красоты. Иногда они даже не знают, что распространяют чье-то мнение – множество CSS resets включают полное удаление стилей focus, это без вопросов подключается как основная зависимость проекта.
Такое решение исключает людей. Веб-сайты и веб-приложения не являются закрытыми трофеями, которые отображаются без контекста в профиле dribbble, это не статичные скриншоты на гладкой корпоративной торговой площадке. Они существуют, чтобы их читали и работали с ними. Существуют правила, которые гарантируют, что это смогут сделать максимальное число людей.
:focus-visible
Дело в том, что иногда люди будут настаивать на удалении стилей focus и будут иметь достаточное влияние, чтобы заставить команду сделать это. Это противоречит правилам, которые предусматривают, что механизмы focus должны быть видимы на сайтах, чтобы те были действительно доступны. Для этого у нас есть псевдоселектор :focus-visible.
Стили псевдоселектора :focus-visible активируются, когда браузер определяет, что сработало событие фокуса, и эвристика браузера сообщает, что используется non-pointer ввод. Это причудливый способ сказать, что браузер показывает фокус при активации с помощью ввода не мышью и не пальцем.
Видео этого CodePen демонстрирует, как разные стили применяются на основе типа ввода, который получает ссылка. Когда на ссылку наводится курсор и делается клик мышью, подчеркивание ссылки удаляется, а сама ссылка немного сдвигается вниз. При нажатии Tab на клавиатуре :focus-visible применяет резкий фоновый цвет к ссылке.
Chromium недавно анонсировал, что хочет реализовать :focus-visible. Поддержка этого псевдоселектора крайне ограничена, но уже существуют полифилы. Он и :focus-within находятся в Selectors Level 4 Editor’s Draft и, возможно, получат нативную поддержку в основных браузерах.
Вы можете знать :focus-visible под его другим именем :-moz-focusring. Этот вендорный псевдоселектор – реализация Mozilla, которой предшествовало предложение 7 лет назад о :focus-visible. В отличие от другого CSS с префиксами, нам не придется думать о поддержке автопрефиксов! Firefox отличает объявление :focus-visible и :-moz-focusring, обеспечивая четкость имен селекторов между двух браузеров.
Шаг вперед, шаг назад
Поддержка в браузерах очень плохая – веб это не только Chrome и Firefox. Полифилы могут обеспечить поддержку, если нативная отсутствует, но это загрузка дополнительных данных, сложность в обслуживании и дополнительный мусор.
Стоит отметить тот факт, что устройства сейчас менее бинарны по своим типам ввода, чем раньше. Surface, флагманский компьютер от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и тачскрин прямо из коробки. WebAIM’s 2017 Screen Reader Survey показал, что мобильные устройства можно дополнить клавиатурой. Эвристика – это хорошо, но, как и аналитика может не давать всей картины.
Стили focus могут быть желательными для пользователей мыши. Их наличие является ясным и однозначным признаком интерактивности – отличный выбор для людей с низким зрением, проблемами мышления и для тех, кто плохо разбирается в технике. Гуру технологий, те, кто глубоко понимают скрин ридеры и знают много сочетаний клавиш как Vim для GUI, они захотят, чтобы состояние focus было очевидным, потому что они танцуют по экрану с помощью клавиатуры.
Процесс создания надежной и устойчивой сети включает создание сильного базового опыта, который работает во всех браузерах. Селектор :focus пользуется как широкой, так и глубокой поддержкой в той степени, что даже экзотические браузеры используют его.
Мир полон вещей, которые для некоторых будут смотреться страшно, а для других красиво. Лично мне focus стили не кажутся уродством. Как дизайнер, я думаю, что это фундаментальная часть создания надежной системы дизайна. Для меня, как для разработчика, описание состояния – это что-то очень привычное. Как человеку мне нравится помогать поддерживать открытость и доступность веба. Это то, каким он должен был быть.
Автор: Eric Bailey
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Focus
Understand the importance of focus in your web applications. You’ll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate.
On your webpage, you click a link that skips the user to the main content of the website. These are often referred to as skip links, or anchor links. When that link is activated by a keyboard, using the tab and enter keys, the main content container has a focus ring around it. Why is that?
This is because the has a tabindex=»-1″ attribute value, which means it can be programmatically focused. When the is targeted—because the #main-content in the browser URL bar matches the id —it receives programmatic focus. It’s tempting to remove the focus styles in these situations, but handling focus appropriately and with care helps to create a good, accessible, user experience. It can also be a great place to add some interest to interactions.
Why is focus important? #
As a web developer, it’s your job to make a website accessible and inclusive to all. Creating accessible focus states with CSS is a part of this responsibility.
Focus styles assist people who use a device such as a keyboard or a switch control to navigate and interact with a website. If an element receives focus and there is no visual indication, a user may lose track of what is in focus. This can create navigation issues and result in unwanted behaviour if, say, the wrong link is followed. You can read more on focus and how to manage it in this guide.
How elements get focus #
Warning
Honoring document source order is really important, and focus order should only be changed if you absolutely have to change it. This applies both when setting tabindex and changing visual order with CSS layout, such as flexbox and grid. Anything that creates unpredictable focus on the web can create an inaccessible experience for the user.
Styling focus #
The default browser behavior when an element receives focus is to present a focus ring. This focus ring varies between both browser and operating systems.
The outline property could appear too close to the text of a link, but the outline-offset property can help with that, as it adds extra visual padding without affecting the geometric size that the element fills. A positive number value for outline-offset will push the outline outwards, a negative value will pull the outline inwards.
In summary #
Creating a focus state that has contrast with an element’s default state is incredibly important. The default browser styles do this already for you, but if you want to change this behaviour, remember the following:
Which of the following are automatically focusable elements?
Доступные индикаторы фокуса в 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 срабатывают на фокусировке/потере фокуса элемента.