Событие по клику. Обработка события click средствами CSS. Как это работает

Если вы хотите совершенствовать свои навыки разработки, лучший путь к совершенству - практика. Предлагаем вашему вниманию ресурсы для проверки знаний в HTML/CSS.

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

Итак, предлагаем вам десять способов протестировать себя на знание HTML и CSS и стать более профессиональным веб-разработчиком.

Начните собственный проект

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

Соревнуйтесь

Лучший способ проверить себя на прочность - принять участие в настоящих соревнованиях по программированию, например, в сообществе CodeWars . В форме игры вы соревнуетесь с другими реальными людьми, извлекая опыт из собственных ошибок. Но это имеет смысл только если вы играете честно.

Присоединитесь к сообществу

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

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

Упражняйтесь в песочнице

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

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

Попробуйте паззлы и блиц-опросы

В сети доступно необъятное множество опросников и паззловых игр, которые охватывают HTML, CSS и другие языки программирования. Как правило, они присутствуют на платных сайтах в качестве дополнения к обучающим курсам. Также вы можете поупражняться с более опытным наставником.

Играйте

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

Найдите сайт с интерактивными тестами

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

Дисциплинируйте себя

Важной частью процесса обучения и проверки собственных знаний является выявление наиболее оптимального способа достичь максимальной продуктивности. Вы можете участвовать в мероприятиях, которые помогут вам найти этот способ. Например, Clean Coders - это сайт, дающий такую возможность через профессиональные обучающие видео. Более того, эти видео весьма интересны, поэтому можете не беспокоиться о концентрации, вы втянетесь с первых минут.

Оглянитесь на мир вокруг

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

Вы решили пройти быстрый и удобный тест по HTML с ответами, но не знаете, куда можно обратиться за подобным? С эффективным решением данной проблемы поможет современный портал WebShake, созданный специально для всех желающих овладеть основами веб-разработки. Мы подготовили для вас удобную форму, с помощью которой вы сможете быстро, просто и совершенно бесплатно проверить свои знания.

Подробные сведения о тесте по HTML

Данный язык гипертекстовой разметки (HyperText Markup Language) считается общепринятым. Он оптимально подходит для незатруднительного создания интернет-страниц с различной структурой. Фактически, свободное владение данным языком позволяет разработчику:

• создавать интернет-порталы;
• прописывать структуру веб-сайтов;
• разрабатывать всевозможные элементы и так далее.

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

Крайне важно регулярно проверять промежуточный итог, определяя собственный уровень знаний. Это же позволяет своевременно исправлять всевозможные ошибки в написании кода. Именно поэтому новичкам рекомендуется проходить тест по основам HTML не реже 1 раза в 2-3 недели.

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

Данные тесты очень удобные и позволяют досконально овладеть синтаксисом языка HTML. Это поможет программисту изучить основы грамотного построения кода с учетом всех переменных. Если у вас возникли какие-либо трудности, мы с радостью готовы проконсультировать и ответить на все интересующие вопросы. Все это поможет быстро разучить язык HTML.

Мы искали, искали файл, который вы указали, но так и не нашли. Это может быть в одном из двух случаев:

1. Вы сделали что-то неправильно.
2. Мы сделали что-то неправильно.

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

Как и почему появляется страница с ошибкой под кодовым названием 404

Вы, конечно, часто задавались вопросом, почему при наборе адреса страницы или при нажатии на некоторую ссылку, появляется совершенно не то, что ожидается, а загадочная и непонятная страница, содержащую информацию, абсолютно нам не нужную. Мало того, что мы получаем разочарование, поскольку вместо желаемого нам подсовывают «пустышку», так еще эту страницу обычно завешивают баннерами, словно ее только все и посещают.

Итак, страница с 404 ошибкой возникает в результате следующих ситуаций. И раз вы читаете данный текст, значит, находитесь в одной из них.

1. Адрес страницы набран с ошибкой

Ну, ошиблись, с кем не бывает. Посмотрите внимательно и наберите адрес еще раз. Если вы точно уверены, что набрали все правильно, переходим к следующему пункту.

2. Страница перемещена или удалена администратором сайта

Была страница, да сплыла. Может убрали ее, может переименовали, а может переместили, а может... Да все что угодно может. Потому что администратор всё, что захочет на сайте может делать. На то он и администратор! В этом случае остается только поймать его в темном углу и сказать вежливо: «Как же так! Куда страницу дел, спрашиваю в последний раз, страницу, раз твою два так, куда дел? А ну верни на место!». После чего, любой здравомыслящий человек, понимая глубину своего заблуждения и полной профнепригодности, делает перенаправление с адреса старой страницы на адрес новой. И мы довольные, можем снова набирать привычный адрес, уже не волнуясь о том, правильный он или нет.

3. Разработчик неправильно указал адрес ссылки

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

После прочитанного, возможно, у вас зародилась мысль, что на данной странице вы оказались исключительно по вине автора данного сайта. Смею вас уверить, что это не так. Почитайте первый пункт, там все написано.

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

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

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

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

Примечание

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

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

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

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

To-be-changed { color: black; } input:checked ~ .to-be-changed { color: red; }

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

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

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

Input { 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:checked ~ .to-be-changed { color: red; }

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

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

Плюсы

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

Минусы

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

Способ с:target

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

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

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

Плюсы

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

Минусы

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

Способ с:focus

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

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

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

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

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

Плюсы

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

Минусы

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

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

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

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

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

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

Плюсы

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

Минусы

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

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

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

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

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

Дисклеймер

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

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

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

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

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

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

HTML-код

CSS-код

To-be-changed {
color: black;
}

color: red;
}
Как видно, он основан на псевдо-классе:checked и основном родственном селекторе ~. Пожалуйста учтите, что он также будет работать со смежным родственным селектором +. В целом, это происходит так: «если чекбокс выделен, то следующие элементы с классом.to-be-changed будут красными».

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

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

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

Input {
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:checked ~ .to-be-changed {
color: red;
}
Таким образом, у вас должно получиться нечто вроде кнопки, которая запускает процесс изменения цвета у элемента параграфа. Не круто ли? Повторный клик по кнопке переключит цвет обратно на черный.

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

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

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

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

Недостатки:

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

Метод:target

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

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

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

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

To-be-changed {
color: black;
}

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

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

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

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

Недостатки:

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

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

Метод:focus

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

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

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

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

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

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

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

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

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

Недостатки:

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

Хак с transition

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

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

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

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

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

span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
Суть первого объявления заключается в задержке любых изменений на примерно 116 дней, что позволяет нам убедиться в том, что изменения останутся сразу, как только будут применены. Они не бесконечны, но похоже на то, не правда ли?

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

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

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

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

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

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

Недостатки:

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

В завершение

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

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

Toggle-states: none | sticky? | infinity (initial: none)
toggle-group: none | (initial: none)
toggle-share: none | # (initial: none)
toggle-initial: (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. Возможно, информация уже не актуальна, но все равно будет очень интересно познакомиться.

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

Внимание! У вас нет прав для просмотра скрытого текста.