"Стилизация кнопки при нажатии в мобильных браузерах CSS"

Быстрый ответ

В CSS отсутствует псевдокласс :touch. Тем не менее, его аналог можно реализовать, используя комбинацию JavaScript и CSS. Представляем вам пример подобного приема:

// JavaScript отвечает за каждое касание
document.addEventListener('touchstart', function(event) {
    if(event.target.matches('.slick-element')) { // "Быстрее, чем молния!"
        event.target.classList.add('feeling-touchy');
    }
});
document.addEventListener('touchend', function(event) {
    if(event.target.matches('.slick-element')) { // "Время отпустить, DJ JavaScript на связи!"
        event.target.classList.remove('feeling-touchy');
    }
});

/* CSS задаёт ритм этой вечеринке */
.slick-element.feeling-touchy {
    /* Расцвет неонового света! */
    background-color: #00f; /* Ярко-синий */
    color: #fff; /* Чистый белый */
}

Такой код гарантирует моментальную визуальную обратную связь, произведя эффект, сопоставимый с первым глотком великолепного гранулированного кофе 😉

Осознание и эмпатия при работе с селекторами

Понимание интерактивных псевдоклассов вроде :hover, :focus, :active – абсолютно ключевой момент. Они позволяют инициировать внешние изменения элементов в ответ на взаимодействие пользователя — почти как волшебство!

Правильная последовательность: Ча-ча-ча псевдоклассов

Последовательность применения псевдоклассов напоминает ритмическую последовательность в танце:

.dance-step:hover {
    /* Зажигательное движение на танцполе! */
}

.dance-step:active {
    /* Решительный шаг! */
}

.dance-step:focus {
    /* Концентрация в стиле танго! */
}

Когда мы кликаем на элемент, в то время как курсор находится над ним, :hover грациозно уступает место :active. Ритмика GUI коррелирует с движениями!

Подробнее об этом расскажет наш спикер на видео

Мануал DJ по дизайну интерактивных элементов

• Грация движений: Используйте плавные переходы, чтобы ваш UX обрел непревзойдённость.
• Освещение на сцене: Свойство -webkit-tap-highlight-color можно использовать для изменения цвета подсветки касаний на устройствах iOS — это похоже на управление освещением на дискотеке!
• Навигация на :hover: Настройте :hover, перед тем как прийти к :active. Таким образом, вы получите более профессиональный контроль над интерактивными состояниями.
• Согласованный подход в браузерах: Обеспечьте консистентность ваших дизайнерских решений в разных браузерах, используя методы обнаружения функционала и прогрессивного улучшения.

Выход из рутиня с помощью медиа-запросов

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

@media (hover: none), (pointer: coarse) {
    .slick-element {
        /* Стили специфичные для сенсорного взаимодействия */
    }
}

@media (hover: hover) and (pointer: fine) {
    .slick-element {
        /* Стили для традиционного взаимодействия */
    }
}

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

Сотрудничество с JavaScript для завершающего шоу

Когда вечеринка на CSS подходит к концу, JavaScript может добавить в неё ярких красок с помощью удивительных эффектов:

• Танцевальные фигуры: С помощью JavaScript можно учитывать сложные жесты и соответствующе реагировать на них.
• Динамичный ритм: JavaScript меняет состояние элементов в реальном времени, добавляя и удаляя CSS-классы.
• DJ-сессия с учетом устройства: Использование JavaScript позволит вам адаптироваться под конкретные устройства, выбирая наиболее эффективные стили.

Полезные материалы