Курсоры и указатели

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

Курсоры

Браузеры автоматически обрабатывают некоторые распространенные случаи использования курсоров.

Если вы читаете это на устройстве с курсором, изучите страницу. Возможно, вы раньше не замечали, как меняются курсоры, но обратите внимание на подсказки, которые он даёт. При наведении указателя мыши на текст курсор принимает форму I-образной стрелки, намекая на возможность выделения текста. При наведении указателя на ссылку курсор принимает форму руки с указательным пальцем, намекая на возможность выполнения действия. В остальных случаях будет использоваться курсор по умолчанию, который часто представляет собой стрелку.

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

Браузеры поддерживают ряд ключевых слов для свойства курсора , которые предоставляют подсказки для перетаскивания, изменения размера, выбора и многого другого.

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

Кареты

Каретка вставки используется для обозначения вашего положения в редактируемом тексте. Она отличается от курсора, так как не следует за мышью. Вы можете изменить цвет с помощью caret-color .

Реагирование на действия пользователя с указателем

Пользователи мыши или трекпада могут взаимодействовать с более точной точкой на экране, чем пользователи сенсорного экрана. Если вы разрабатываете дизайн, ориентированный только на точность мыши, пользователи с сенсорными экранами или проблемами с мелкой моторикой могут не иметь возможности взаимодействовать с вашей страницей так, как им нужно.

К распространённым проблемам относятся слишком маленький размер кнопок или слишком близкое расположение интерактивных элементов друг к другу. Это затрудняет взаимодействие пользователей с нужным элементом.

Обеспечение достаточного размера кнопок и других интерактивных элементов — важный шаг к обеспечению доступности вашего сайта. Вы также можете настраивать стили в зависимости от точности устройств ввода пользователя с помощью медиазапросов с pointer и any-pointer .

Функция pointer media» относится к основному устройству ввода пользователя, а any-pointer — ко всем устройствам ввода. Можно сопоставить такие устройства, как мыши, с fine , а такие устройства, как сенсорные экраны, — с coarse . Значение none указывает, что пользователь не использует устройство ввода с указателем.

События указателя и касания

Отключение определенных жестов сенсорного экрана

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

Чтобы отключить обработку некоторых действий браузером, перечислите те действия, которые элемент должен обрабатывать. pan-x и pan-y активируют жесты панорамирования одним пальцем. Их можно включить вместе с pinch-zoom , который позволяет масштабировать и панорамировать изображение несколькими пальцами.

Ключевое слово manipulation эквивалентно pan-x pan-y pinch-zoom . manipulation исключает другие сенсорные действия, требующие множественных касаний за короткое время, например двойное нажатие для масштабирования.

После отключения обработки действия браузером путем исключения его из touch-action вы можете настроить события указателя для этого действия.

Отключение всех событий и действий

В некоторых случаях может потребоваться указать, что элемент не является интерактивным. Например, установив pointer-events: none для кнопки, вы не сможете нажать на неё или даже активировать состояние наведения курсора.

Проверьте свое понимание