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

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

CSS .some-component { /* Styles for touch devices */ } @media screen and (min-width: 1024px) { .some-component { /* Styles for hover-able devices */ } }

123456789

.some-component {  /* Styles for touch devices */} @media screen and (min-width: 1024px) {  .some-component {    /* Styles for hover-able devices */  }}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

CSS .some-component { /* Styles for touch devices */ } @media (hover: hover) { .some-component { /* Styles for hover-able devices */ } }

123456789

.some-component {  /* Styles for touch devices */} @media (hover: hover) {  .some-component {    /* Styles for hover-able devices */  }}

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

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

Pointer

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS .some-component { /* Styles for touch devices, including Android */ } @media (hover: hover) and (pointer: fine) { .some-component { /* Styles for hover-able devices */ } }

123456789

.some-component {  /* Styles for touch devices, including Android */} @media (hover: hover) and (pointer: fine) {  .some-component {    /* Styles for hover-able devices */  }}

any-hover and any-pointer

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

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

Пример Javascript

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

JavaScript const list = document.querySelector(‘[data-list]’) const isHoverableDevice = window.matchMedia( ‘(hover: hover) and (pointer: fine)’ ) /* Hide the block link initially */ blockLink.hidden = true list.addEventListener(‘click’, (e) => { /* Do nothing if target is not a link, or device is hover-capable */ if (!e.target.dataset.link || isHoverableDevice.matches) return /* If touch device, show the block link */ e.preventDefault() blockLink.hidden = false blockLink.innerText = `Visit ${e.target.dataset.link}’s page` blockLink.setAttribute(‘href’, e.target.href) })

123456789101112131415161718

const list = document.querySelector(‘[data-list]’)const isHoverableDevice = window.matchMedia(  ‘(hover: hover) and (pointer: fine)’) /* Hide the block link initially */blockLink.hidden = true list.addEventListener(‘click’, (e) => {  /* Do nothing if target is not a link, or device is hover-capable */  if (!e.target.dataset.link || isHoverableDevice.matches) return   /* If touch device, show the block link */  e.preventDefault()  blockLink.hidden = false  blockLink.innerText = `Visit ${e.target.dataset.link}’s page`  blockLink.setAttribute(‘href’, e.target.href)})

Доступность

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

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

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

Автор: Michelle Barker

Источник: webformyself.com