24.09.2021

Определение устройств с возможностью наведения указателя мыши

Определение устройств с возможностью наведения указателя мыши

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

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

CSS

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

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

Медиа-запросы 5 уровня

Спецификация CSS Level 5 Media Queries предоставляет нам различные новые медиа-запросы помимо уже знакомых для размера области просмотра. Одна из их — hover функция. Она определяет, может ли основное указывающее устройство юзера (например,курсор мыши или сенсор) находится над элементом при загрузке интернет-страницы. Возможные значения hover (которые будут верны, к примеру, для устройства с мышью) или none (что будет верным для планшета, применяемого сенсорный ввод). Мы можем использовать медиа-запрос последующим образом:

CSS

Hover и pointer функции на самом деле является частью спецификации Level 4 медиазапросов! Только недавно поддержка браузеров стала почти универсальной.

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

Pointer

Функция pointer инспектирует, есть ли на устройстве указатель и точность указательного устройства. Вероятные значения: coarse (для указателя, такого как палец на сенсорном экране), fine (к примеру, мышь) или none (устройство без указателя).

Добавление этого в наш медиа-запрос удачно обнаруживает сенсорный ввод на устройствах Android:

CSS

any-hover and any-pointer

Если это не довольно, то медиа-запросы any-hover и any-pointer позволяют нам протестировать способности любого из устройств ввода — не только основного. Так что, если у вас есть устройство, которое реагирует и на мышь, и на сенсорный ввод, any-hover:hover будет true.

Мне пока не приходилось использовать эти функции, но спецификация включает несколько примеров того, как можно использовать эти медиа-запросы.

Пример Javascript

Не так давно я создал веб-страницу, на которой при наведении курсора на всякую из нескольких идентичных ссылок отображается имя ссылки, что мало похоже на всплывающую подсказку. Но юзеры сенсорных устройств не увидят эту подсказку. Заместо этого клик по изображению приведет юзера непосредственно к URL-адресу ссылки, что может вызвать противные ощущения, поскольку они не будут знать, какую страничку посещают. Вместо этого для сенсорных устройств я решил оборвать клик и показать кнопку, которую юзер мог затем нажать, чтобы перейти к соответственному URL-адресу. Мы можем использовать тот же медиа-запрос для обнаружения сенсорного ввода в JS, используя matchMedia:

JavaScript

Доступность

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

Поддержка браузера

Отменная новость заключается в том, что вы сможете использовать эти медиа-запросы прямо сейчас, так как они поддерживаются во всех современных браузерах. Сейчас вы можете улучшить взаимодействие с юзерами всех устройств!

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *