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

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

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

Тем не менее, ситуация становится еще хуже: после прекращения перетаскивания эффект наведения остается активным!

Наведение на сенсорном экране (эмуляция). Источник: https://proper-hovering.glitch.me

Это определенно запутает некоторых из ваших пользователей, и это никогда не будет хорошо. Что-то должно быть сделано.

«Уже должно было появиться какое-то решение…»

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

body.nontouch nav a:hover { background: yellow; }

Это метод изначально связан с рядом проблем:

Разработчик может создать сценарий обнаружения, который хорошо работает сегодня, но что будет через два месяца, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Я, скорее всего, не заботился бы об этом во время разработки.

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

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

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

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

Введение Level 4 Media Queries

Медиа-запросы великолепны. Они в одиночку создали адаптивный веб-дизайн и являются краеугольным камнем в современной мобильной веб-разработке. В качестве отличной инициативы W3C добавил Функции взаимодействия с медиа в качестве рекомендации для L4 Media Queries, и мы можем их использовать для распознавания устройств с сенсорным экраном.

Включены четыре медиа-запроса: hover, any-hover, pointer и any-pointer. Они предоставляют информацию о возможности наведения и типе пользовательских вводов. Информация может быть только о первичном вводе или о любом доступном вводе. Например, @media(hover: hover) будет true, если основной ввод может быть наведением (например, курсор мыши), а @media(any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, сенсорный ввод). Эти медиа-функции предоставляют достаточно информации для правильной обработки :hover.

Одна из проблем заключается в том, что эти запросы на данный момент являются просто рекомендованными кандидатами, что означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними и решите, подходит ли это для вашего проекта. Это определенно на данный момент подходит для нас, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), заставляет нас еще более оптимистично смотреть в будущее.

«Так что же делать?»

Это означает отсутствие эффектов наведения на чисто сенсорных устройствах, и использование их на всех остальных устройствах. Особый случай — это ноутбуки с сенсорными экранами, но мы можем ожидать, что мышь / тачпад используется большую часть времени. Даже если эффект наведения застревает, пользователь может легко использовать мышь / тачпад, чтобы проверить проблему и устранить ее. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения, что позволяет правильно обрабатывать медиа-запросом.

Вот тестовый сайт, с помощью которого вы можете протестировать свое собственное устройство, чтобы определить, какие из этих медиа-запросов применяются к нему, а также увидеть некоторые из наиболее популярных настроек устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, работают нормально. Проверяя разные устройства, он показывает, что ноутбуки можно выбрать с помощью запроса @media(hover: hover) и (pointer: fine) {}.

@media(hover: hover) and (pointer: fine) { nav a:hover { background: yellow; } }

Я что-то пропустил? Что вы обычно используете в этих случаях? Я очень доволен этим решением, но дайте мне знать, если есть что-то лучше!

Автор: Mezo Istvan

Источник: https://blog.usejournal.com

Редакция: Команда webformyself.

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

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Ищем поддержку hover на css / Хабр

При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности?

В начале сразу хочу сказать о том, что есть js-библиотека Modernizr, которая решает эту задачу. Но… Прикручивать эту библиотеку только для определения поддержки hover, вместо написания одного медиа-запроса в css — не лучший вариант, на мой взгляд.

Но и с медиа-запросами не все так просто. Давайте посмотрим, какие есть варианты!

1. media (hover)

div{color:red;}
@media (hover){
/*Поддерживает hover*/
div{color:green;}
}

Как видим, он не поддерживается IE и Firefox. Т.е. наш код будет воспринимать эти браузеры, как без поддержки hover. Такой вариант нам не подходит!

2. media (pointer:coarse)

div{color:green;}
@media (pointer:coarse){
/*touch-устройство*/
div{color:red;}
}

Такое решение вполне подходит для тех случаев, когда нужно прописать стили именно для touch-устройств. Но в основном, стоит задача — прописать стили именно для hover. А это означает, что придется сначала писать стили для всех браузеров, а потом сбрасывать их в медиа-запросе. Это не только увеличивает код, но и довольно неудобно, т.к. надо дублировать каждое свойство, измененное при событии hover на элементе.

3. media (hover) +

Выбирая из двух вышеупомянутых вариантов, первый наиболее привлекательный. Была бы еще браузерная поддержка побольше…

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

Итак, данный код будет работать только в IE:

@media (min-width:0\0) {}

@media (min--moz-device-pixel-ratio:0) {}

div{color:red;}
@media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0){
/*Поддерживает hover*/
div{color:green;}
}

Демо сравнения 3х подходов. Зеленый цвет = поддержка hover:

Псевдокласс: навести | Справочник CSS

Значение и применение

Псевдокласс : hover используется для стилизации любого элемента, на который в данный момент указывает курсор мыши. Чаще всего используют данную псевдокласс с ссылками, кнопками, в меню навигации и таблицами.

Если вы используете псевдоклассы: ссылка и: посещено, то псевдокласс : hover должен быть расположен после них.

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

CSS cинтаксис:

 : hover  {
блок объявлений;
}
 

Версия CSS

Пример использования

<стиль>
  стол  {
ширина: 50%; / * указываем ширину элемента в процентах от ширины области просмотра * /
}
  т, тд  {
выравнивание текста: слева; / * горизонтальное выравнивание текста по левому краю * /
граница: сплошной оранжевый 1px; / * сплошная граница размером 1 пиксель оранжевого цвета * /
}
  tr: hover  {
цвет фона: хаки; / * устанавливаем цвет заднего фона * /
}




НаименованиеМодель  Цена 


Кирпич100  15 долларов 


Лабутеныкрасные  1500 долл. США 


Штанывощительные  200 $ 


Шапкаушанка  200 долларов 
 

 

В этом примере использования псевдокласса : наведите указатель на , которое мы подсвечиваем, указанное в настоящее время наведен:

Использование: hover | WebReference

Примеры использования: наведите указатель мыши следующим образом.

  a {цвет: зеленый; }
a: hover {цвет: красный; }  

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

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

Сальса — современный социальный танец.Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.