День 34 | Убираем hover для планшетов и смартфонов

Оптимизация для touch-устройств

На мобильных устройствах и планшетах нет курсора мыши, поэтому нет состояния hover (наведения). Hover эффекты на таких устройствах могут работать странно — элемент может "залипнуть" в hover состоянии после касания.

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

Media queries для определения устройств

CSS предоставляет специальные media queries для определения типа устройства:

@media (hover: none)

/* Убираем hover для устройств без мыши */
@media (hover: none) {
  .button:hover {
    background: #F36049; /* Не меняется при наведении */
  }
  
  .card:hover {
    transform: none; /* Убираем hover анимации */
  }
}

Что это делает? Стили внутри этого media query применяются только к устройствам, которые не поддерживают hover (touch-устройства).

@media (pointer: coarse)

/* Для устройств с touch-экраном */
@media (pointer: coarse) {
  .hover-effect {
    display: none; /* Скрываем элементы, которые работают только с hover */
  }
  
  /* Увеличиваем размеры кликабельных элементов */
  .button {
    min-height: 44px; /* Минимальный размер для удобного касания */
    min-width: 44px;
  }
}

pointer: coarse означает "грубый указатель" (палец). В отличие от "fine pointer" (мышь).

Комбинированный подход

/* Только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  .button:hover {
    background: #e04d38;
  }
}

/* Для touch-устройств */
@media (hover: none) {
  .card:active {
    transform: scale(0.98); /* Эффект нажатия вместо hover */
  }
}

Логика:

• На устройствах с мышью — hover эффекты работают
• На touch-устройствах — hover эффекты отключены, но можно добавить :active эффекты (при нажатии)

Touch-friendly интерфейсы

На touch-устройствах важно:

• Увеличить размеры кликабельных элементов (минимум 44x44px)
• Увеличить отступы между элементами (чтобы не нажать не туда)
• Убрать hover эффекты
• Добавить визуальную обратную связь при касании (:active)

/* Базовые стили для всех устройств */
.button {
  padding: 12px 24px;
  min-height: 44px; /* Минимум для touch */
}

/* Hover только для устройств с мышью */
@media (hover: hover) {
  .button:hover {
    background: #e04d38;
  }
}

/* Active для всех (работает и на touch) */
.button:active {
  transform: scale(0.95);
}

Практическое задание

1. Проверьте свой сайт на мобильном устройстве
2. Найдите элементы с hover эффектами
3. Добавьте media queries для отключения hover на touch-устройствах
4. Увеличьте размеры кликабельных элементов для мобильных
5. Добавьте :active эффекты для touch-устройств