Обработка события click средствами CSS
В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.
Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое.
Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.
В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для "обнаружения" нажатия с помощью только CSS без JavaScript.
Примечание
Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока - прикоснуться к границам возможностей CSS.
Используем чекбокс
Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.
Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.
HTML
CSS
.to-be-changed {
color: black;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
Метод основан на использовании псевдо-класса :checked и селектора ~. Обратите внимание, что он будет работать и с селектором +. Сущность метод заключается в том, что "если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.
Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:
Итак, мы прячем чекбокс и используем метку для реагирования на событие 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
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
CSS
Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :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 дней)
Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое.
Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.
В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для "обнаружения" нажатия с помощью только CSS без JavaScript.
Примечание
Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока - прикоснуться к границам возможностей CSS.
Используем чекбокс
Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.
Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.
HTML
Code
<input type="checkbox">
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
CSS
Code
.to-be-changed {
color: black;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
Метод основан на использовании псевдо-класса :checked и селектора ~. Обратите внимание, что он будет работать и с селектором +. Сущность метод заключается в том, что "если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.
Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:
Code
<input type="checkbox" id="toggle">
<label for="toggle">Нажми меня!</label>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
<label for="toggle">Нажми меня!</label>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
Итак, мы прячем чекбокс и используем метку для реагирования на событие click:
Code
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
Code
<a href="#id">Нажми меня!</a>
<p id="id" class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
<p id="id" class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
CSS
Code
.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
Code
<span tabindex="0">Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
CSS
Code
span:focus ~ .to-be-changed {
color: red;
}
color: red;
}
Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.
Плюсы
Очень простой код CSS и HTML
Отличная навигация
Минусы
Требуется либо элемент с фокусом, либо атрибут tabindex
Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)
Способ с переходами
Вероятно, данный метод является самым "грязным" способом обработки события click в CSS.
Идея заключается в "хранении" стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.
HTML
Код
<span>Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>
CSS
Code
.to-be-changed {
transition: all 0s 9999999s;
}
span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию.
Плюсы
Просто и изящно
Сохраняется состояние, даже если переход не закончился
Минусы
Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
Работает только со значениями, которые можно использовать с переходами
Нет способов возврата к исходному состоянию
Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)
-
FalleN -
4065 -
1 -
186
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...