Skip to content

Instantly share code, notes, and snippets.

@monochromer
Last active August 10, 2021 08:23
Show Gist options
  • Select an option

  • Save monochromer/d5a202a7eb81dc7b986003b57e965bb5 to your computer and use it in GitHub Desktop.

Select an option

Save monochromer/d5a202a7eb81dc7b986003b57e965bb5 to your computer and use it in GitHub Desktop.
Определение способа взаимодействия hover, pointer, any-hover, any-pointer

Определение способа взаимодействия

https://habr.com/ru/company/ruvds/blog/556156/

hover

Мультимедийная функция hover используется для выполнения запроса, направленного на выяснение возможности пользователя наводить указатель основного указывающего устройства на элементы. Если у устройства имеется несколько указывающих устройств, то hover-запрос должен отражать характеристики «основного» указывающего устройства, определённого пользовательским агентом.

@media (hover: hover) {
  /* при использовании основного механизма ввода можно без труда навести указатель на элемент */
}

@media (hover: none) {
  /* Если основной механизм ввода не позволяет навести указатель на элемент, или позволяет, но это не очень-то просто (например — для имитации наведения указателя на элемент используется длительное касание экрана), или если у устройства нет основного указывающего устройства — сработает запрос */
}

pointer

Мультимедийная функция pointer используется для выполнения запроса на предмет наличия и точности указывающего устройства, такого, как мышь. Если имеется несколько указывающих устройств — сведения, возвращаемые запросом pointer, должны отражать характеристики «основного» указывающего устройства, определённого пользовательским агентом.

@media (pointer: coarse) {
  /* Если основной механизм ввода данных включает в себя указывающее устройство ограниченной точности */
}

@media (pointer: fine) {
  /* Если основной механизм ввода данных включает в себя точное указывающее устройство */
}

@media (pointer: none) {
  /* Если же в состав основного механизма ввода данных указывающее устройство не входит */
}

Примеры

/* смартфоны, устройства с сенсорным экраном, с которым работают пальцами */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* устройства с сенсорным экраном, с которым работают стилусом */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* контроллер Nintendo Wii, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* мышь, тачпад */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Обратите внимание на то, что если имеется несколько указывающих устройств, hover- и pointer-запросы возвращают сведения об основном указывающем устройстве.

Медиазапросы, реагирующие на все типы устройств

Any-pointer используется для выполнения запроса на предмет наличия и точности указывающих устройств. Соответствующий запрос не принимает во внимание дополнительные устройства ввода, не являющиеся указывающими, и не может быть использован для проверки наличия других механизмов ввода данных, таких, как d-пады, или средства управления, основанные лишь на клавиатуре, которые не позволяют перемещать экранный указатель. Запрос «any-pointer: none» вернёт true только в том случае, если на исследуемом устройстве нет ни одного указывающего устройства.

/* как минимум один механизм ввода устройства включает в себя указывающее устройство ограниченной точности */
@media (any-pointer: coarse) {
    /* ... */
}
/* как минимум один механизм ввода устройства включает в себя указывающее устройство высокой точности */
@media (any-pointer: fine) {
    /* ... */
}
/* устройство не имеет указывающего устройства */
@media (any-pointer: none) {
    /* ... */
}

Запрос «any-hover: none» вернёт true в том случае, если указывающего устройства нет, или если все имеющиеся указывающие устройства не позволяют навести указатель на элемент. В силу этого подобные запросы следует рассматривать как способ проверки наличия хотя бы одного указывающего устройства, позволяющего наводить указатель на элементы, а не проверки того, что какое-то из указывающих устройств не позволяет наводить указатель на элементы. Последняя задача в текущих условиях не может быть решена ни с помощью медиазапроса any-hover, ни с помощью какого-то другого медиазапроса, направленного на анализ возможностей по взаимодействию пользователя с устройством. Кроме того, any-hover-запросы не принимают во внимание наличие на устройстве механизмов ввода данных, не относящихся к указывающим устройствам, таких, как d-пады и клавиатуры, которые, по своей природе, не позволяют наводить указатели на элементы.

/* имеющиеся механизмы ввода данных позволяют с лёгкостью наводить указатель на элементы */
@media (any-hover: hover) {
  /* ... */
}
/* имеется один или большее количество механизмов ввода данных, поддерживающих наведение указателя на элементы, но сделать это не особенно легко (например — для имитации наведения указателя на элемент используется длительное касание экрана) */
@media (any-hover: on-demand) {
  /* ... */
}
/* имеющиеся механизмы ввода данных не обеспечивают функционал наведения указателя на элементы, или указывающих устройств не обнаружено */
@media (any-hover: none) {
  /* ... */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment