17 сентября в 14:26

Пример слайдера, управляемого только с помощью CSS3 tutorial recovery mode

Стремительное развитие программного обеспечения, а параллельно с ним ещё более резвый рост производительности компьютерного оборудования, растворяют в себе злободневность полемики об эффективном коде. И вот уже в очередном проекте 2-3-страничного сайта нам проще использовать нечто типа jQuery('.spoiler').show(), чтобы оживить статичный сайт. Ведь за мощью компьютера совсем не заметно расточительство ресурсов, вызванное цепочкой внутри библиотечных действий от такой команды, и только ради организации простейшей бизнес-логики на клиентской стороне.

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

Любителям сначала поразгадывать ребус — как же мне удалось запрограммировать такой интерфейс на CSS — следуйте на страницу примера. Если не отгадаете, загляните за подсказкой в исходный код примера. Там всё прокомментировано и разложено по секциям. Остальных приглашаю под кат, где изложу суть этого механизма.
CSS4.

Выйти из положения позволит родственный селектор. Только тег <input> придётся вынести перед тегом <label>, то есть сделать их ближайшими соседями. Это даст хранить состояние воображаемой кнопки за счёт того, что оно уже хранится флажком, и управлять стилями кнопки за счёт того, что она является правым соседом флажка. Причём флажок становится лишь тенью, а потому с помощью стилей вообще скрывается от показа на странице.

Вот как это выглядит в html-разметке (на CSS4 атрибуты id, name, for не понадобились бы, здесь они используются лишь для пометки — что с чем связано и где теневой элемент):

<input id="меткаСвязи" name="меткаТени" type="checkbox" /> <label class="типНавигатора меткаНавигатора" for="меткаСвязи"> текст кнопки </label>

Так это выглядит в стилях (здесь скрываем теневой элемент и стилизуем кнопку согласно её типу, скажем это могли быть «кнопка», «флажок», «переключатель», «тумблер» и так далее — сколько бы нам понадобилось разных видов навигаторов):

[name="меткаТени"] { display: none; } [name="меткаТени"] + .типНавигатора { стили для кнопки данного типа }

Создаём общие обработки событий

В отличие от частных обработок, предназначенных для отмеченного навигатора на странице, общие обработки задают стиль всякого навигатора соответствующего типа при наступлении определённого события. Например, курсор над кнопкой. Например, тумблер в положении ВКЛЮЧЕНО. И тому подобное.

[name="меткаТени"] + .типНавигатора:hover { стили, когда курсор над кнопкой } [name="меткаТени"]:checked + .типНавигатора { стили, когда находится в состоянии ВКЛЮЧЕНО } [name="меткаТени"]:not(:checked) + .типНавигатора { стили, когда в состоянии ВЫКЛЮЧЕНО } [name="меткаТени"]:disabled + .типНавигатора { стили, когда в состоянии ЗАПРЕЩЁН } [name="меткаТени"]:not(:disabled) + .типНавигатора { стили, когда в состоянии РАЗРЕЩЁН } [name="меткаТени"]:indeterminate + .типНавигатора { стили, когда в неопределённом состоянии }

Создаём части контента

Здесь всё как обычно — тривиальные блоки html-разметки, в которых располагаем контент как нам удобно. Только части, какие будут управляться навигаторами, необходимо снабдить какой-нибудь уникальной меткой, чтобы к этим частям можно было сослаться. Например

<form> ля-ля-ля <div class="управляемыйЭлемент меткаСпойлера1"> некое уточнение </div> <div> ля-ля-ля <div class="управляемыйЭлемент меткаУведомления1"> Не заполнили имя! </div> ля-ля-ля <div class="управляемыйЭлемент меткаУведомления2"> Не заполнили емейл! </div> ля-ля-ля </div> <div class="управляемыйЭлемент изначальноВидимый меткаПанели1"> выдвигающаяся панель </div> ля-ля-ля </form> <div class="управляемыйЭлемент изначальноВидимый меткаУведомления3"> Заполните предложенную форму! </div>

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

.управляемыйЭлемент { display: none; } .управляемыйЭлемент.изначальноВидимый { display: block; } .меткаУведомления1, .меткаУведомления2 { color: red; } .меткаУведомления3 { color: green; } .меткаПанели1 { width: 20px; }

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

Кроме того, корневые узлы DOM-веток, в которых размещены управляемые элементы, должны быть одноуровневыми соседями навигаторов.

Создаём частные обработки событий

Эти обработки похожи на общие, только задаются в отношении конкретного навигатора и с применением обобщённого родственного селектора. Например по включению Кнопки1 раздвинем Панель1.

[name="меткаТени"]:checked + .меткаКнопки1 ~ .меткаПанели1, [name="меткаТени"]:checked + .меткаКнопки1 ~ * .меткаПанели1 { width: 300px; }

Двойная запись здесь означает, что панель либо размещена по соседству с кнопкой, либо в каком-то из соседей кнопки.

Ещё пример — по включению Кнопки1 покажем Спойлер1.

[name="меткаТени"]:checked + .меткаКнопки1 ~ .меткаСпойлера1, [name="меткаТени"]:checked + .меткаКнопки1 ~ * .меткаСпойлера1 { display: block; }

Ещё пример — по выключению Флажка1 скроем Уведомление3.

[name="меткаТени"]:not(:checked) + .меткаФлажка1 ~ .меткаУведомления3, [name="меткаТени"]:not(:checked) + .меткаФлажка1 ~ * .меткаУведомления3 { display: none; }

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

Очевидные недостатки:

• особенности обобщённого родственного селектора вынуждают располагать навигатор в html-разметке ранее управляемой части контента;
  
  
• те же особенности селектора не дают размещать навигатор в глубине другой DOM-ветки, чтобы он не имел прямого соседства с DOM-веткой управляемого контента (это появится в CSS4);
  
  
• отсутствие селектора прямого родителя вынуждает выносить теневой флажок перед кнопкой в html-разметке и добавлять во флажок и кнопку лишние атрибуты, только чтобы указать их связанность, а также порождает лишние конструкции в стилях (это появится в CSS4);
  
  
• проблема разрозненности теневого флажка и кнопки может быть решена и в CSS3 за счёт отказа от кнопки и превращения флажка в неё (более точно, кнопку подменит псевдо элемент :before или :after), однако не все браузеры поддерживают такое превращение, чтобы не вмешиваться в нашу стилизацию (отдельные атрибуты оказываются не перекрываемыми, например -moz-appearance: none не действует на <input type="checkbox"> в Firefox).
  

От автора:

• в примере я обошёл тему анимации слайдера, она не являлась целью примера, потому сделана простая — показать / скрыть элемент, попробуйте поиграть свойством transition или эффектами из animate.css, если вам это интересно;
  
  
• вы можете делать бесплатные или коммерческие модули, управляемые чисто на CSS? — с удовольствием размещу информацию о них на своей странице модулей.
  

Скриншот примера в полный размер:

Developers, stick with Russians – work in London

Переводы с
карты на карту

Переводы
через QR-Код

Новая функция
«Мой контроль»

Возьми Lumia 925 на тест-драйв сейчас.

Впечатляющие возможности
в стильном тонком корпусе из металла

Intel® App

Innovation Contest

Boomburum
исследует LTE

Эволюция средств связи
в путешествии по России

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

внутри бизнеса?

Нет, я про что-то поменьше.
Переместите чекбокс «отключить показ слайдов...» хотя бы ниже зеленой надписи. У вас он сломается, а на JS продолжит работать.
Я не говорю что все плохо/бред, но мне кажется, что это максимум… прикольно и не более.

Здесь — зависимость от html-разметки, на JS — зависимость от использованных оберточных тегов, имен классов и идентификаторов в разметке:

$('li a span').doSomething() — удалите оберточный тег из <a> или замените другим, и вот уже развалилось;

$('.active').doSomething() — вдруг верстальщик подшаманил страницу так, что класс active поменял на selected, и вот уже развалилось.

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

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

Более того, верстальщики высокого класса подтвердят, что возможны такие внутренние компоновки элементов модуля (каскады позиционирующих wrapper-контейнеров), когда перемещение элемента может быть сделано лишь комбинацией css-правил, при этом html-разметка остается не тронутой, следовательно модуль продолжит работать.

Ну и с появлением CSS4 отпадет требование размещать управляющие элементы над управляемыми и обязательно на одном уровне иерархии с корнями DOM-веток управляемых элементов.