Обработка события click средствами CSS

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

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

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

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

Примечание

Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока - прикоснуться к границам возможностей CSS.

Используем чекбокс

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

Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

HTML

<input type="checkbox">
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    color: black;
}
 
input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

Метод основан на использовании псевдо-класса :checked и селектора ~. Обратите внимание, что он будет работать и с селектором +. Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

<input type="checkbox" id="toggle">
<label for="toggle">Нажми меня!</label>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

Итак, мы прячем чекбокс и используем метку для реагирования на событие click:

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
 
label {
    display: block;
    background: #08C;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: white;
    font-weight: bold;
}
 
input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

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

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный - применение display:none.)

Плюсы

• Бинарный, есть только два состояния - отмечен или не отмечен
• Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
• Позволяет организовать обработку связанных событий click  (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее  действие)

Минусы

• Элементы должны иметь общего предка
• Требуется дополнительная разметка HTML (input, label и так далее)
• Требуется дополнительные действия для работы на мобильных браузерах

Способ с :target 

Есть другой способ с использованием псевдо-класса :target. Данный псевдо-класс поход на псевдо-класс :hover тем, что соответствует только определенным условиям.

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

HTML

<a href="#id">Нажми меня!</a>
<p id="id" class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    color: black;
}
 
.to-be-changed:target {
    color: red;
}

При нажатии на ссылку (href="#id") изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

Плюсы

• Простой код CSS
• Отлично подходит для выделения разделов

Минусы

• Мусор в истории браузера
• Происходит прокручивание страницы
• Требуется тег ссылки или операции с URL для включения хэштега
• Можно воздействовать только на один элемент (так как ID является уникальным)
• Не способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с :focus 

Продолжим наш обзор способом с использованием другого псевдо-класса - :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

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

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

HTML

<span tabindex="0">Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS 

span:focus ~ .to-be-changed {
    color: red;
}

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

Плюсы

• Очень простой код CSS и HTML
• Отличная навигация

Минусы

• Требуется либо элемент с фокусом, либо атрибут tabindex
• Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым "грязным" способом обработки события click в CSS.

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

HTML

<span>Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    transition: all 0s 9999999s;
}
 
span:active ~ .to-be-changed {
    transition: all 0s;
    color: red;
}

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

Плюсы

• Просто и изящно
• Сохраняется состояние, даже если переход не закончился

Минусы

• Плохая поддержка в браузерах (нет в  IE9 и Opera Mini)
• Работает только со значениями, которые можно использовать с переходами
• Нет способов возврата к исходному состоянию
• Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

• Комментарии