—»     —»   Обработка событий click средствами CSS
  Раздел: CSS/Style Sheets   Нет комментариев  

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



Последние несколько лет мы наблюдаем за стремительным развитием языков разработки внешних интерфейсов, а особенно – HTML с новыми спецификациями в HTML5, а также CSS версии 3 с множеством новых свойств.

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

Многим очень не доставало возможности управлять событиями при нажатиях (Click Events) в CSS. На самом деле, многие люди думают, что эта опция нам не нужна, так как взаимодействие больше относится к функционалу javascript. В принципе, здесь все ясно, наверное не очень удобно использовать javascript для самых простых событий нажатия.

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

В любом случае, на сегодняшний день, CSS не предоставляет нам какие-то официальные методы управления событиями нажатий в CSS. Но существует несколько очень интересных трюков, которые мы можем использовать для «определения» нажатий (кликов) при помощи только лишь кода CSS, без использования javascript, и именно об этом мы сегодня поговорим.

Дисклеймер

Данная статья нацелена на то, чтобы рассказать вам о возможности управлять событиями кликов посредством CSS. Это не совсем подходит для применения в серьезных проектах. Пожалуйста, учтите, что вся статья представляет собой ничего больше, чем эксперимент, но никак не руководство по управлению событиями кликов в вашем веб-сайте или приложении.

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

Хак с чекбоксом

Замечательная вещь! Мы уверены, что все вы уже слышали о хаке с чекбоксом раньше. Это наверное самый распространенный способ управления событиями кликов в CSS. Он основан на… чекбоксе.

Преимущественная сторона чекбокса заключается в том, что он бинарный. Он либо выделен, либо нет. И нет возможности выделить что-то «наполовину» или как-то вроде этого. Именно поэтому хак с чекбоксом – это довольно надежный способ запуска событий кликов в CSS. Давайте приведем пример.

Как это работает

HTML-код

<input type="checkbox">
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</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">Click me!</label>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

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

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.)

* Посмотреть демо

Преимущества и недостатки

Преимущества:

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

Недостатки:

* Элементам нужно разделять один и тот же родительский элемент (родственные элементы)
* Необходим дополнительный HTML-код (элемент ввода, ярлык и так далее)
* Необходимо два дополнительных трюка, чтобы заставить метод работать на мобильных браузерах (для этого нужно будет прочесть статью далее)

Метод :target

Существует другой метод, известный как «имитация» события кликов в CSS при помощи псевдо-класса :target. Этот псевдо-класс сильно схож с :hover.

Особое событие псевдо-класса :target зависит от того, что мы называем «идентификатором фрагмента». Проще говоря, этот псевдо-класс ссылается на хэштег, который вы порой можете встречать на конце URL-адреса. Совпадение образуется тогда, когда хэштег и ID элемента одинаковы.

Как это работает

HTML-код

<a href="#id">Click me!</a>
<p id="id" class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS-код

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

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

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

* Посмотреть демо с использованием :target

Преимущества и недостатки

Преимущества:

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

Недостатки:

* Путаница в истории браузера
* Происходит прыжок по странице (при переключении к анкору)
* Для запуска хэштега требуется тег анкора или URL-хак
* Работает только с одним элементом (так как ID всегда уникальны)
* Нет возможности вернуться к исходному положению без использования еще одно хэштега, ссылки, либо URL-хака.

Браузерная поддержка не на высоте, но все не так плохо. Все современные браузеры поддерживают такой подход, за исключением (IE 6-8). Начиная от IE9, поддержка работает стабильно.

Метод :focus

Давайте рассмотрим еще один способ с использованием псевдо-класса, на этот раз это будет :focus. Здесь суть примерно такая же, за исключением того, что здесь не требуется изменения URL. Метод нацелен на сосредоточивание внимания пользователя на конкретном элементе.

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

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

Как это работает

HTML-код

<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS-код

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

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

* Посмотреть демо с использованием :focus

Преимущества и недостатки

Преимущества:

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

Недостатки:

* Необходим либо элемент, позволяющий фокусировку, либо атрибут tabindex
* Псевдо-элемент совпадает только тогда, когда на элементе произведено фокусирование (это означает, что все перепутается, если кликать куда-либо еще).

Хак с transition

Это, наверное, один из самых невероятных способов управления событиями кликов в CSS. Серьезно, это безумие. Этот метод был придуман Joel Besada, и всегда был одним из наших любимых CSS-трюков.

Суть заключается в размещении CSS-стиля в CSS-переходе. Да, вы прочли все правильно, в CSS-переходе (transition). На самом деле, идея довольна проста. Она основана на применении псевдо-бесконечной задержки в изменении, что позволяет предотвратить возврат к исходному значению. Все наверное звучит запутанно, но на самом деле все просто. Пожалуйста, ознакомьтесь с кодом.

Как это работает

HTML-код

<span>Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS-код

.to-be-changed {
transition: all 0s 9999999s;
}

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

Суть первого объявления заключается в задержке любых изменений на примерно 116 дней, что позволяет нам убедиться в том, что изменения останутся сразу, как только будут применены. Они не бесконечны, но похоже на то, не правда ли?

Но нам не нужно, чтобы изменения были применены через 116 дней после клика, нам нужно, чтобы все происходило незамедлительно! Итак, здесь нам нужно переписать задержку в момент клика (псевдо-класс :active) для того, чтобы применить изменения. Затем, когда клик будет произведен, старый параметр transition будет возвращен, возвращая параметр задержки на 9999999s, что предотвратит возврат к исходному положению.

* Посмотреть демо с использованием transition

Преимущества и недостатки

Преимущества:

* Невероятно хитрая задумка
* Сохраняет нужное значение при спуске кнопки, даже если переход еще не завершен (смотрите ниже)

Как заявил Joel Besada:

«здесь самое интересное заключается в том, что вы можете закончить переход на полпути, а параметр сохранит то же значение, которое у него было в конкретный момент перехода. К примеру, давайте предположим, что у нас есть линейный переход непрозрачности от 1 до 0 за 2 секунды, но мы продолжаем его всего 1 секунду. То есть, параметр непрозрачности должен остановиться на 0.5, так как задержка не позволяет параметру вернуться обратно. Если мы сейчас снова запустим переход в непрозрачности, он продолжится с 0.5, вместо того, чтобы воспроизводиться с начала».

Недостатки:

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

В завершение

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

Tab Atkins Jr. писал об этом пару месяцев назад. Было написано целое предложение о положениях переключателей в CSS. Вы можете взглянуть на его работу:

toggle-states:  none | <integer> sticky? | infinity  (initial: none)
toggle-group: none | <ident> (initial: none)
toggle-share: none | <selector># (initial: none)
toggle-initial: <integer> (initial: 1)

…где:

* toggle-states представляет собой базовую функцию, которая позволяет включать/выключать функционал переключения. None означает отключенное положение, 2 и более отвечают за различные положения.

* toggle-group реализует функционал радио-кнопки. Если вы кликните по toggle-group элементу с установленным параметром отличным от none, все элементы, которые разделяют один и тот же toggle-group, будут автоматически выставлены на первое положение (выключены).

* toggle-share реализует функционал ярлыка. Когда вы кликаете по элементу с toggle-share, он действует так, будто вы кликнули по всем элементам, на которые он указывает.

* toggle-initial выставляет исходное положение переключателя.

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

Итак, мы снова вернулись к javascript. Это, вероятно, лучший способ, если вам хочется надежности и сплоченности. Тем не менее, если вы хотите позабавиться, разрабатывая что-то на «чистом CSS-код», то наша статья точно окажется вам полезной.

Также хочется отметить, что Chris Coyier из CSS-Tricks еще два года назад написал статью в блог об управлении двойными кликами при помощи CSS. Возможно, информация уже не актуальна, но все равно будет очень интересно познакомиться.

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

* Скачать все примеры
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 16670   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930