Hover на мобильных устройствах: Возможен ли аналог :hover в html/css/js на мобильных устройствах? — Хабр Q&A

CSS :hover. Оригинальные hover-эффекты

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

Три грани сайтостроения

С формальной точки зрения есть три основных компонента (в разных синтаксических обликах), которые составляют сайт: PHP-код, JavaScript-код и описания стилей CSS. Абсолютно не важно, как именуется и какой версии используется тот или иной компонент, какая версия HTML разметки используется и какая версия браузера стоит. Совместимость нынче не в почете, потому в каждый момент времени актуально: что закодировано и что из того, что закодировано, может быть отображено и исполнено.

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

Личное и общественное

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

Разделяя личное и общественное, используя в последнем только то, что работает, можно достичь заметных успехов в дизайне. Красота, художественный момент и веб-дизайн – удел соответствующих специалистов и талантов. CSS – это код, хотя и весьма своеобразный. Его забота описать стили (варианты отображения информации). С появлением мобильных устройств CSS подгрузили реальным кодированием в виде медиа-запросов. Так что вариант повторного брака между дизайном и кодом — это не такая уж нереальность, как могло показаться всего пару лет назад.

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

Первое правило: на стандарт надейся, но и сам не плошай

CSS:hover — это когда мышка «зашла» на элемент страницы. Когда мышка кликнула на элементе, он становится активным, но когда курсор уходит в сторону, он опять может измениться и показать себя в активном состоянии. “:hover”, “active” и “visited” – самые востребованные псевдоклассы при описании стилей.

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

element {

color: black;

}

element:hover {

color: white;

background-color: green;

}

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

Второе правило: доверяя стандартам, ориентируйся на свой код

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

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

Есть существенная разница и :hover здесь срабатывает вовсе не так, как хотелось бы. Без кода здесь не обойтись, а использование медиазапросов решает не все вопросы.

Совместимость — слишком дорогое удовольствие в современном информационном мире, поэтому, чтобы обеспечить надлежащий функционал сайту в пределах установленных требований к веб-дизайну и реализации функционала, предпочтительно ориентироваться на минимально необходимые варианты использования: CSS hover, CSS hover focus, CSS hover active (visited). Чем больше код (как внутри браузера, так и на сервере,) контролирует веб-дизайн, тем лучше. Программа – это контроль, лучше когда этот контроль не сдается на откуп действующим стандартам, от которых часто не знаешь чего ждать.

Кнопки и другие элементы страницы

Button hover CSS – чудесное решение, но по большому счету каждый элемент страницы есть «кнопка». Сайт должен быть прежде всего живым и если в коде это не заложено, если задача создать сайт, который развивается адекватно области применения и действует с учетом поведения посетителя, то как минимум средствами CSS-стилей можно придать живость элементам страницы.

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

Подводные камни в таблицах стилей

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

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

Использование AJAX, когда нет необходимости вновь генерировать страницу чтобы отобразить реакцию на действие посетителя, а достаточно изменить ее элемент или несколько элементов добавляет немного «перца». «Дружба» кодов — того что уже в браузере (JavaScript) и того что на сервере (PHP) – удел автора (программиста) сайта.

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

Стандарт и его эмуляция

CSS style hover может быть эмулировано посредством JavaScript, путем использования событий onmouseover и onmouseout. Часто этим все и заканчивается. С позиций здравого смысла, когда речь идет о создании реально работающего сайта, лучше держать управление в своих руках, чем дарить его на откуп мифическим стандартам, которые меняются вне воли и желания разработчика.

Иногда можно прочитать что-то вроде «данная возможность доступна даже в IE», но чаще можно прочитать о том, какие описания стилей воспринимаются тем или иным браузером. Значительно реже можно узнать про то, как отличается JavaScript в тех или иных браузерах.

Оценивая накопленный опыт, восторгаясь возможностями «Хрома» и «Оперы», критикуя медлительность и инертность браузера от производителя (незабвенного, дорогого сердцу всякого программиста IE от «Майкрософт»: «Старый добрый Internet Explorer не ругал только ленивый. Или тот, кто на компьютере умеет только играть в «Косынку»», — цитата неизвестного интернет-автора), следует придерживаться золотой середины: использовать то что работает везде и всегда.

Людям нужны средства для работы, когда им нужно получить острые ощущения они обычно идут в загс или театр, но не в Интернет.

Эмуляция и контроль

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

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

Обзор Chrome DevTools. Решаем основные задачи разработчика — Блог HTML Academy

Что нужно сделать?

• Посмотреть, как выглядит страница с телефона и планшета
• Быстро изменить стили прямо на странице
• Протестировать блоки на переполнение
• Узнать, какие файлы подключены, и посмотреть их расположение
• Понять, почему не работают скрипты
• Проверить качество сайта

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

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

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

Посмотреть, как выглядит страница с телефона и планшета

При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:

Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.

Так выглядит страница в мобильной версии

На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.

Быстро изменить стили прямо на странице

В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.

Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.

Меняем элемент прямо на странице

После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.

В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover, :active, :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.

Изменяем стилевые правила для псевдоэлементов

Протестировать блоки на переполнение

Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.

Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.

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

Как проверить элемент на переполнение текстом

Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:

Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.

Переполнение родительских блоков

Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.

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

Узнать, какие файлы подключены, и посмотреть их расположение

Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:

Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S  для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.

Меняем цвет фона во вкладке Sources

Понять, почему не работают скрипты

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

Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js

Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.

Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.

Как использовать точки останова

Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.

Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.

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

Для чего они нужны, пойдем по порядку:

Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.

Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.

Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.

Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.

Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.

Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.

Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.

Проверить качество сайта

При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.

Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.

Как использовать Lighthouse

Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.

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

Запускаем Lighthouse

Результаты проверки.

Получаем результаты

Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.

Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.

При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».

---

Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов». Создайте свой проект под руководством наставника, оптимизируйте его производительность и научитесь отладке кода с помощью инструментов разработчика.

Браузеры и устройства. Начало работы · Bootstrap. Версия v4.4

Узнайте больше о браузерах и устройствах всех видов, которые поддерживаются Bootstrap и об известных багах для каждого из них.

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

Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.

Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko, поддерживаются не полностью. Однако и в них BS4 должен отображаться и работать корректно. Более точная информация – ниже.

Вы можете найти поддерживаемые браузеры с указанием версий в .browserslistrc file:

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.  4
Opera >= 30

Мы используем Autoprefixer для обработки поддержки задуманного браузера через префиксы CSS. Autoprefixer использует Browserslist для взаимодействия и управления версиями этих браузеров. Смотрите документацию данных двух инструментов для получения информации по их внедрению в ваши проекты.

Мобильные устройства

В общем, BS4 поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) не поддерживаются.

	Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	Поддер-живается	Поддер-живается	Нет	Android v5. 0+ Поддер-живается	Поддер-живается
iOS	Поддер-живается	Поддер-живается	Поддер-живается	Нет	Поддер-живается
Windows 10 Mobile	Нет	Нет	Нет	Нет	Поддер-живается

Браузеры PC

Аналогично, последние версии большинства таковых браузеров поддерживаемы.

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	Поддер-живается	Поддер-живается	Нет	Нет	Поддер-живается	Поддер-живается
Windows	Поддер-живается	Поддер-живается	Поддер-живается, IE10+	Поддер-живается	Поддер-живается	Не поддер-живается

Для Firefox, дополняя поддержку последнего стабильного релиза, BS4 также поддерживает последний релиз Firefox с «расширенной поддержкой» — Extended Support Release (ESR).

Предположительно BS4 должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.

Для получения списка некоторых «багов» браузеров, с которыми довольно трудно бороться, загляните на стену «багов».

Internet Explorer

IE 10+ поддерживаются, IE9 и ниже – нет. Знайте, что некоторые свойства CSS3 и элементы HTML5 поддерживаются не полностью в IE10, или требуют предустановленных свойств для нормальной работы. Посетите Can I use… для подробностей по поддержке браузерами свойств CSS3 и HTML5.

Если вам потребуется поддержка IE8-9, пользуйтесь BS3. Это наиболее стабильная версия и она все еще поддерживается нашей командой в наиболее критических случаях. Версия Bootstrap 3.4.0 вышла 13 декабря 2018 г.

Всплывающие окна и выпадающие меню на мобильниках

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

Поддержка свойства overflow:hidden; достаточно ограничена в iOS и Андроидах. По этой причине, когда вы прокручиваете ниже верха или низа всплывающего окна в этих устройствах, содержимое <body> начнет прокручиваться. Смотрите Chrome bug #175502 (решено в Chrome v40) и WebKit bug #153852.

Текстовые поля и прокрутка в iOS

Что касается iOS 9.2, — пока всплывающее окно открыто – если начальное касание жеста прокрутки происходит внутри границ <input> или <textarea>, прокручиваться вместо окна будет содержимое <body>. Смотри WebKit bug #153856.

Выпадающие элементы навигационной панели

Элемент .dropdown-backdrop не используется на iOS в навигационной панели из-за сложности z-индексирования. Таким образом, чтобы закрыть выпадающий элемент, необходимо коснуться его (или другой элемент, который вызовет событие «клик» в iOS).

«Зум» в браузере

Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов BS4 и остальной страницы. В зависимости от вида проблемы, мы можем «починить» этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.

«Липкий»

:hover/:focus на мобильных

Хотя реальный «hover» невозможен на большинстве тачскринов, большинство мобильных браузеров симулируют его и делают :hover «липким». Другими словами: стили :hover начинают работать после постукивания на элементе и останавливаются лишь после того как юзер «стукнет» по другому элементу. На сайтах концепции «mobile-first» такое поведение обычно нежелательно.

Bootstrap имеет решение для описанного поведения, хотя оно и отключено по умолчанию. При установке значения переменной $enable-hover-media-query на true при компиляции Sass, BS4 будет использовать mq4-hover-shim для дезактивации стилей :hover в браузерах, имитирующих «hovering», таким образом предотвращая «липкое» поведение стилей

:hover.

Печать

Даже в современных браузерах она может вызвать проблемы.

Что касается Safari v8.0 – использование класса с фиксированной шириной .container может заставить браузер использовать необычно мелкий шрифт при печати. Смотрите issue issue #14868 и WebKit bug #138192. Есть еще один обход этого бага (код внизу):

@media print {
  .container {
    width: auto;
  }
}

Встроенный браузер Андроида

По умолчанию Android 4.1 (и даже некоторые более его новые релизы ) поставляются с браузером-приложением по умолчанию (в противоположность Chrome). К несчастью, это приложение имеет множество «багов» и несовместимостей с CSS в целом.

По элементам <select>: встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен border-radius и\или border. (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента <select> встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Хотите пример? JS Bin demo.

Валидаторы

Для обеспечения наилучшей работы на старых и глючных браузерах для применения определенных настроек CSS к определенным версиям браузеров и исправления «багов» в самих браузерах, BS4 иногда использует CSS browser hacks. Эти «хаки» по понятным причинам заставляют «ругаться» валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.

Эти «ругательства» валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.

Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.

Работает ли css hover на мобильных устройствах?

Спросил 12 лет, 7 месяцев назад

Изменено 1 год, 5 месяцев назад

Просмотрено 78k раз

Работает ли css hover на мобильных устройствах? У меня есть класс css hover, который отлично работает в обычном веб-браузере, но не работает в мобильных браузерах.

• css
• мобильный
• наведение

1

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

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

—W3C: CSS 2.1: селекторы, динамические псевдоклассы

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

4

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

Дополнительная информация здесь: http://designshack.net/articles/css/are-hover-events-extinct/

4

Что автор вопроса имеет в виду под «Работает ли CSS hover на мобильных устройствах?»?

Очевидно, он не имеет в виду это буквально, потому что на мобильных устройствах нет такой вещи, как наведение, поэтому она не может работать.

Если он имеет в виду «На мобильных устройствах, если я нажму на объект в стиле наведения, что-нибудь произойдет?» ответ «Да», но то, что происходит, зависит от устройства/браузера.

В частности, на iPhone/Safari и Android ответ выглядит так, как если бы вы написали обработчик события OnClick() с изменением стиля в нем, и это сохраняется до тех пор, пока вы не нажмете на другой объект. На телефоне с Windows изменение стиля происходит, когда ваш палец нажат на телефоне, а затем возвращается, когда вы отпускаете его.

Вы можете проверить свое устройство на тестовом сайте, который я создал по адресу davidleader.net/mobiledemo.html.

0

Нет, если только устройство не может определить, когда кто-то проводит пальцем по экрану, собираясь нажать. 🙂

2

Зависит от браузера, используемого на мобильном устройстве. Обратитесь к Quirks Mode для мобильных устройств и посмотрите, будет ли он реализован в вашем браузере/платформе.

По моему собственному опыту, он отлично работает на моем iphone4, независимо от браузера (сафари или хром), но не работает должным образом на моем nexus10 с хромом. ..

Я использовал :hover для реализации меню. Когда я говорю «это работает», я имею в виду, что первое касание ведет себя как наведение курсора на рабочий стол, а второе — как щелчок. Когда я говорю «это не работает», я имею в виду, что тач ведет себя как щелчок напрямую…

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

не работает на устройствах с сенсорным экраном, но работает на мобильных устройствах, где пользователь перемещается с помощью клавиш со стрелками (или на Amazon Kindle)

также работает для устройств Blackberry Storm 1, так как они имеют сенсорные и щелкающие события из-за их замшево-тактильных экранов.

Да, есть. если не верите, попробуйте. i) Напишите Hover Css на Codepen или другом стеке, в котором у вас была учетная запись. ii) Сохраните свою работу. [это легко увидеть, если вы добавите ‘border-bottom: 1px dotted black’] iii) Откройте его на своем мобильном телефоне, планшете или на том, что вы хотите доказать. [которое сохранит ваша ручка, разумейте CodePen]

В результате вы получите ответ. Не слишком верьте теории, просто практикуйте и доказывайте ее.

:hover работает с браузером Android по умолчанию, но очень сложно (для пользователя) вызвать зависание без одновременного нажатия кнопки.

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

У

Mobile нет ховера, чувак!.

Идеи, как справиться с отсутствием наведения | Синтия Антунес

Я сбился со счета, сколько раз мне нужно было сказать «Мобильный телефон не зависает» на собрании, посвященном плану проекта.

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

Кроме того, кнопка с наведением на мобильном телефоне может потребовать от пользователя нажатия дважды, чтобы активировать функцию кнопки. Ужасный.

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

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

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

Здесь я не буду заострять внимание на хороших практиках ховера в целом, но могу упомянуть, если это влияет на необходимость мобильной адаптации.

Ниже я перечисляю наиболее распространенные решения, которые я использовал:

На рабочем столе очень часто можно увидеть наведение на кнопки, и на самом деле, когда наведения нет, мы можем подумать: «Это кликабельно?».

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

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

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

Простая кнопка с активным эффектом

Ниже приведена ссылка с хорошим примером использования красивого волнового эффекта для щелчка/нажатия. Он имитирует то, что происходит, когда мы прикасаемся к воде в физической среде, поэтому он нам уже знаком.

Источник: Чистый CSS Ripple с минимальными усилиями

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

Эта концепция изменения состояния может быть применена к текстовым ссылкам, например. при нажатии на ссылку она меняется на другой цвет.

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

Наведение с анимацией триггера для фильтрации методов при нажатии. С сайта rounddesignguide.com/methods.

А вот выводить ту же картинку на мобилу может быть плохим выбором, даже если учесть, что там она будет статична. Без движения не будет такого эффекта, поэтому рекомендуется найти другой способ подачи.

Таким образом, веб-сайт Circular Design Guide создал для него другой подход к мобильной версии, используя элементы, гораздо более «осязаемые» визуально.

Страница методов на сайте circledesignguide.com/methods в мобильной версии.

Всплывающие подсказки на мобильных устройствах не так хороши.

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

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

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

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

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

На этом снимке экрана ниже у меня возникли проблемы с закрытием этого сообщения. Было неясно, закроет ли он ленту «вне», в самой всплывающей подсказке или снова в правильном вопросительном знаке. А тут во всех случаях не получалось и нужно было перепрошиваться. 🙁

Скриншот кассы электронной коммерции American Eagle

Однако добавление (X) дает четкий контроль над тем, что пользователь должен сделать, чтобы убрать товар со своего экрана.

Скриншот кассы электронной коммерции American Eagle с предложением улучшение

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

Переключаемое меню электронной коммерции American Eagle

Складное меню — это решение для небольших устройств.

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

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

В некоторых интернет-магазинах кнопка «Добавить в корзину» отображается при наведении курсора и сохраняется для мобильных устройств.

Необходимость отображать призыв к действию «Добавить в корзину» в сетке/списке товаров виртуального магазина может сильно различаться. Согласно исследованиям Baymard, в окне просмотра рабочего стола обычно нет необходимости постоянно отображать несущественные интерактивные элементы, такие как « Добавить в корзину». Вместо этого они могут отображаться, когда пользователи наводят курсор на нужный товар. Это уменьшает беспорядок в списке продуктов, облегчая его сканирование.

Знаменитая тема Avada WordPress. Демонстрация диетолога. PS: Это не лучший способ показать CTA «Добавить в корзину», но я не буду сейчас вдаваться в эту тему. Этот пример работает для того, что необходимо объяснить в этом случае.

Но при переносе этого эффекта на мобилу не работает.

Скриншот темы Avada WordPress в мобильной версии. Демонстрация диетолога.

В приведенном выше примере при нажатии на изображение продукта сначала появится содержимое красного поля с надписью «Добавить в корзину» и «Подробности», вместо перенаправления пользователя непосредственно на страницу сведений о продукте (PDP).

Таким образом, для мобильного просмотра есть 2 наиболее часто используемых решения, которые следует выбирать с учетом контекста, который дизайнеру необходимо будет проанализировать:

1- Показать CTA и любые другие функции, такие как «Сравнить», если они существуют, фиксированные на странице под названием продукта и ценой.

2- Или не показывайте CTA в списке продуктов и полагайтесь на то, что пользователь коснется изображения продукта, чтобы перейти к PDP, поскольку это обычное поведение. Там они будут взаимодействовать в соответствии со своими потребностями.

В последнее время ни один веб-проект не обходится без сенсорных устройств.

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

Создано автором

Или слишком похож на этот, текст, который накладывается на картинку при наведении.

Gif, созданный с помощью фотографии Каддафи Русли на Unsplash

В обеих ситуациях не указано, что пользователь должен нажать на изображение без каких-либо указаний на «обнаружение» дополнительной информации.

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

И давайте согласимся, что даже только для десктопа удивительный контент — не лучший вариант, когда мы хотим что-то сообщить, верно?

Перед определением функций, которые будут использоваться, необходимо рассмотреть контекст каждого проекта. Дизайнерские решения не должны быть копией и вставкой из других проектов, которые вы видели, или из какого-то списка идей в Интернете.

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

CSS { В реальной жизни }

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

 .some-component { 
 /* Стили для сенсорных устройств */ 
 } 
 @media screen and (min-width: 1024px) { 
 .some-component { 
 /* Стили для устройств с наведением */ 
 } 
 } 
 

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

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

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

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

 .some-component { 
 /* Стили для сенсорных устройств */ 
 } 
 @media (hover: hover) { 
 .some-component { 
 /* Стили для наведения устройства */ 
 } 
 } 
 

См. перо Медиа-запрос Hover от Мишель Баркер (@michellebarker) на КодПене.

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

Указатель

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

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

 .some-component { 
 /* Стили для сенсорных устройств, включая Android */ 
 } 
 @media (hover: hover) and (pointer: fine) { 
 . some-component { 
 /* Стили для устройств с возможностью наведения */ 
 } 
 } 
 

См. перо Медиа-запрос Hover от Мишель Баркер (@michellebarker) на КодПене.

любое наведение и любой указатель

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

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

Пример Javascript

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

 const list = document.querySelector('[data-list]') 
 const isHoverableDevice = window.matchMedia(
 '(наведение: наведение) и (указатель: хорошо)' 
 )
 /* Скрыть заблокировать ссылку изначально */ 
 blockLink.hidden = true
 list.addEventListener('click', (e) => { 
 /* Ничего не делать, если цель не является ссылкой или устройство поддерживает наведение */ 
 if ( !e.target.dataset.link || isHoverableDevice.matches) return
 /* Если сенсорное устройство, показать ссылку на блокировку */ 
 e.