Курсоры и указатели¶
Курсор помогает пользователям понять, с чем они взаимодействуют, и его можно стилизовать в конкретных ситуациях.
На устройствах без сенсорного экрана курсор — основной способ показать пользователю, с чем он взаимодействует. Можно также подсказать, как взаимодействовать с элементом и как движение по трекпаду или мыши повлияет на сайт.
Курсоры¶
Браузеры сами обрабатывают некоторые типичные случаи для курсоров.
Если вы читаете это на устройстве с курсором, поводите им по странице. Возможно, вы раньше не замечали, как меняется курсор, но обратите внимание на подсказки. Когда указатель оказывается над текстом, курсор становится I-образной балкой выделения: так он предлагает выделить текст. При наведении на ссылку курсор превращается в руку с вытянутым указательным пальцем: так он предлагает выполнить действие. В остальных местах остается курсор по умолчанию, чаще всего стрелка.
Чем интерактивнее становится сайт, тем полезнее настроить курсор, чтобы пользователи быстрее понимали возможное взаимодействие.
Браузеры поддерживают набор ключевых слов для свойства cursor: они подсказывают перетаскивание, изменение размера, выделение и другое.
Если ни один из поддерживаемых курсоров не передает взаимодействие элемента, в качестве курсора можно задать изображение SVG или PNG.
Каретки¶
Каретка ввода показывает позицию в редактируемом тексте. Это не курсор: она не следует за мышью. Цвет меняется свойством caret-color.
Реакция на ввод указателя¶
Пользователи с мышью или трекпадом попадают в более точную точку на экране, чем пользователи сенсорного экрана. Если проектировать интерфейс только под точность мыши, людям с сенсорным экраном или с нарушениями мелкой моторики может быть трудно взаимодействовать со страницей так, как им нужно.
Типичные проблемы — слишком маленькие кнопки и слишком близко расположенные интерактивные элементы. Из-за этого трудно попасть в нужный элемент.
Достаточный размер кнопок и других интерактивных целей — важный шаг к доступности сайта. Стили можно также подстраивать под точность устройств ввода с помощью медиазапросов pointer и any-pointer.
Медиапризнак pointer относится к основному устройству ввода, а any-pointer — ко всем устройствам ввода. Устройства вроде мыши соответствуют значению fine, сенсорные экраны — coarse. Значение none означает, что пользователь не пользуется устройством ввода с указателем.
События указателя и касания¶
Отключение отдельных жестов сенсорного экрана¶
На сенсорном экране браузер обрабатывает некоторые привычные жесты. Например, касание двумя пальцами и их разведение обычно увеличивает масштаб сайта. Эти действия не обязательно реализовывать на сайте, но в отдельных случаях их поведение хочется отключить или переопределить.
Чтобы браузер не обрабатывал часть действий, перечислите действия, которые элемент должен обрабатывать сам. pan-x и pan-y включают жесты панорамирования одним пальцем. Их можно включить вместе с pinch-zoom, который разрешает масштабирование и панорамирование несколькими пальцами.
Ключевое слово manipulation равносильно pan-x pan-y pinch-zoom. manipulation исключает другие жесты касания, которым нужно несколько касаний за короткое время, например двойное касание для увеличения.
Когда обработка действия браузером отключена — его нет в touch-action, — для этого действия можно настроить события указателя.
Отключая действия касания, следите за тем, чтобы не создать проблем с доступностью. Например, если запретить увеличение всей страницы, макет может стать устойчивее, но людям с нарушениями зрения будет труднее добраться до содержимого.
Отключение всех событий и действий¶
Иногда нужно указать, что элемент не интерактивен. Если, например, задать кнопке pointer-events: none, по ней нельзя будет щелкнуть и даже вызвать состояние наведения.
Источник — Cursors and pointers