В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3. Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое. Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно. В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для "обнаружения" нажатия с помощью только CSS без JavaScript. Примечание Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока - прикоснуться к границам возможностей CSS. Используем чекбокс Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS. Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS. HTML 1 <input type="checkbox"> 2 <p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p> CSS 1 .to-be-changed { 2 color: black; 3 } 4 5 input[type=checkbox]:checked ~ .to-be-changed { 6 color: red; 7 } Метод основан на использовании псевдо-класса :checked и селектора ~. Обратите внимание, что он будет работать и с селектором +. Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”. Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так: 1 <input type="checkbox" id="toggle"> 2 <label for="toggle">Нажми меня!</label> 3 <p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p> Итак, мы прячем чекбокс и используем метку для реагирования на событие click: 01 input[type=checkbox] { 02 position: absolute; 03 top: -9999px; 04 left: -9999px; 05 } 06 07 label { 08 display: block; 09 background: #08C; 10 padding: 5px; 11 border: 1px solid rgba(0,0,0,.1); 12 border-radius: 2px; 13 color: white; 14 font-weight: bold; 15 } 16 17 input[type=checkbox]:checked ~ .to-be-changed { 18 color: red; 19 } У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно. (Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный - применение display:none.) Плюсы Бинарный, есть только два состояния - отмечен или не отмечен Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом) Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие) Минусы Элементы должны иметь общего предка Требуется дополнительная разметка HTML (input, label и так далее) Требуется дополнительные действия для работы на мобильных браузерах Способ с :target Есть другой способ с использованием псевдо-класса :target. Данный псевдо-класс похож на псевдо-класс :hover тем, что соответствует только определенным условиям. Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают. HTML 1 <a href="#id">Нажми меня!</a> 2 <p id="id" class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p> CSS 1 .to-be-changed { 2 color: black; 3 } 4 5 .to-be-changed:target { 6 color: red; 7 } При нажатии на ссылку (href="#id") изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target. Плюсы Простой код CSS Отлично подходит для выделения разделов Минусы Мусор в истории браузера Происходит прокручивание страницы Требуется тег ссылки или операции с URL для включения хэштега Можно воздействовать только на один элемент (так как ID является уникальным) Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL Способ с :focus Продолжим наш обзор способом с использованием другого псевдо-класса - :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе. Когда вы находитесь на странице, то с помощью клавиши табуляции можно перемещаться от одного элемента к другому. Такой метод очень удобен при работе с формами для перехода между элементами без использования мыши. Также метод применяется для навигации слабовидящими людьми по странице. Важно, что некоторые элементы могут получать фокус ввода, например, ссылки, параграфы, поля ввода и многие другие. Вам только нужно установить для них атрибут tabindex с числовым значение для них. HTML 1 <span tabindex="0">Нажми меня!</span> 2 <p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p> CSS 1 span:focus ~ .to-be-changed { 2 color: red; 3 } Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #. Плюсы Очень простой код CSS и HTML Отличная навигация Минусы Требуется либо элемент с фокусом, либо атрибут tabindex Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы) Способ с переходами Вероятно, данный метод является самым "грязным" способом обработки события click в CSS. Идея заключается в "хранении" стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации. HTML 1 <span>Нажми меня!</span> 2 <p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p> CSS 1 .to-be-changed { 2 transition: all 0s 9999999s; 3 } 4 5 span:active ~ .to-be-changed { 6 transition: all 0s; 7 color: red; 8 } Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию. Плюсы Просто и изящно Сохраняется состояние, даже если переход не закончился Минусы Плохая поддержка в браузерах (нет в IE9 и Opera Mini) Работает только со значениями, которые можно использовать с переходами Нет способов возврата к исходному состоянию Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)