02Адаптив

Touch vs hover паттерны

Что работает с пальцем, что с курсором — и как сделать чтобы работало везде.

Адаптируй интерактивы под touch и hover.

Главное различие

Hover (cursor)	Touch (palец)
Можно "наводить" без клика	Нет состояния hover
Курсор показывает где он	Палец не виден до тача
Tooltip на hover работает	Tooltip нужен другой trigger
Drop-down раскрывается на hover	Нужен tap чтобы открыть

Паттерны и их адаптация

1. Tooltips

Hover: title атрибут или кастомный tooltip Touch: tap → show tooltip, повторный tap → действие

Решение:

На touch — заменить tooltip на label рядом
Или показывать tooltip на первый tap, действие на второй
Или использовать "long press" для tooltip

Hover: открывается при наведении (часто плохо даже на desktop) Touch: только при клике

Универсально:

Click/tap чтобы открыть
Click/tap снаружи или escape чтобы закрыть
Аккуратные транзишены

3. Hover-only carousel controls

Стрелки показываются только при hover на картинку. Touch: невидимые → юзер не знает что есть

Решение:

Always-visible на touch
@media (hover: hover) для скрытия только на hover-устройствах

4. Hover-reveal action buttons

Кнопка "Delete" появляется при hover на ряд таблицы. Touch: невозможно дотянуться

Решение:

Touch: always-visible (или swipe-to-reveal)
Mobile-specific UI: bottom sheet с actions

5. Drag and drop

Hover: drag handle всегда видим Touch: нужен явный handle (long press на element + drag indicator)

Touch требует тщательного UX:

Visual feedback что ты в drag mode
Минимум 16px drag handle
Haptic feedback если возможно

6. Hover-driven anim для feedback

Кнопка меняет цвет при hover → визуальное подтверждение. Touch: :active стейт срабатывает на момент тача

Решение:

Подсветка :active важна для touch
-webkit-tap-highlight-color контролирует defauлт highlight

Хорошие практики

✓ @media (hover: hover) { ... } для hover-only стилей ✓ @media (pointer: coarse) { ... } для touch-устройств специально ✓ Минимум 44×44px touch target ✓ 8px gap между интерактивами ✓ :focus-visible для клавиатуры (не показывать outline после mouse-click)

Прогрессивное улучшение

/* Базовое: работает везде */
.button {
  padding: 12px 24px;
  background: var(--bg);
}

/* Touch: больше padding */
@media (pointer: coarse) {
  .button { padding: 16px 32px; }
}

/* Hover: эффект только когда есть hover */
@media (hover: hover) {
  .button:hover { background: var(--bg-hover); }
}