CSS-трюки: счетчик кликов без Javascript

Можно ли сделать счетчик кликов на чистом HTML/CSS без участия Javascript? Это пришло как «вопросы из любопытства» от друга веб-разработчика. После непродолжительного исследования я обнаружил эту технику, которая не только забавна, но и может быть полезна.

И вот решение: JSFiddle. Нажмите на число в окне результатов и увидите, что числа изменяются от 1 до 4 в цикле. Только с HTML и CSS!

Идея довольно проста: в HTML у нас есть только два флажка с метками для кодирования 4 разных состояний в двоичном формате. И в CSS у нас есть 4 блока, сгенерированных с помощью :after псевдоэлемент. Только один из них становится видимым в зависимости от состояния флажка.

Где это можно было бы использовать? В большинстве случаев Javascript лучше, чем CSS в создании таких эффектов. Но CSS лучше, когда мы говорим не о поведении, а о представлении данных.

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

Кроме того, наличие логики представления в CSS вместо Javascipt делает эту логику намного проще для понимания и поддержки.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *