Interaction Media Features — это тип медиа-запроса в стилях. Определяет каким путем пользователь может взаимодействовать с вашим приложением.
Простой способ разделить стили для устройств с различными типами взаимодействия, например, тач-устройства и десктоп, управляемый мышкой.
Сейчас во многих интерфейсах управляющие элементы показываются только при наведении курсора мыши по событию :hover
. Но на тач-девайсах такое событие отсутствует как класс. И вот тут нам как раз пригодится рассматриваемый медиа-запрос.
Вот простой пример кода:
HTML
<div class="parent">
parent
<div class="child">child</div>
</div>
CSS
.parent:not(:hover) .child {
/* здесь мы указываем показывать child элемент только при наведении на parent'а */
display: none;
}
@media (hover:none) {
.child {
/* а тут указываем, что child должен быть виден на устройствах, где hover отсутствует */
display: block!important;
}
}
И таким образом мы покажем пользователю с тач-устройством то, что на ему недоступно без события :hover
.
И живой пример на codepen.
See the Pen Interaction Media Features by Sergey Kirichenko (@oknechirik) on CodePen.
Для проверки работы медиа-запроса откройте инспектор и переключите вид на мобильное устройство.
Поддержка браузерами уже достаточная, на мой взгляд, чтобы пользоваться этим меди-запросом.