Вы можете сделать это с помощью CSS?

Давайте посмотрим, как выглядит обновленная разметка:

 <section class="section-container section-one" id="page_1"> <a href="#exit" class="btn btn-exit"> X </a> <a href="#page_1" class="btn btn-page"> <span>Page 1</span> </a> <header class="section-header"> <div class="section-content"> <h1> Title of Section X </h1> </div> </header> <div class="section-info"> <div class="section-content"> <p> ... </p> </div> </div> </section> <!-- this is again repeated for id="page_2", etc --> 

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

CSS — это место, где происходят большие изменения:

 .btn-exit { display: none; visibility: hidden; } #page_1:target .btn-exit, #page_2:target .btn-exit, #page_3:target .btn-exit, #page_4:target .btn-exit { border: 1px solid #333; display: inline-block; padding: 4px 12px; text-decoration: none; visibility: visible; } .btn-page { height: 100%; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } .btn-page span { position: relative; top: 50%; } #page_1:target, #page_2:target, #page_3:target, #page_4:target { transform: translate(0%, 0%); width: 100%; height: 100%; z-index: 5; overflow: auto; } #page_1:target .btn-exit, #page_2:target .btn-exit, #page_3:target .btn-exit, #page_4:target .btn-exit { display: inline-block; visibility: visible; } #page_1:target .btn-page, #page_2:target .btn-page, #page_3:target .btn-page, #page_4:target .btn-page { display: none; } #page_1:target .section-content, #page_2:target .section-content, #page_3:target .section-content, #page_4:target .section-content { border: 0; opacity: 1; visibility: visible; } #exit:target .page .section-container { border: none; opacity: 1; } 

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

Селекторы для меток были обновлены для использования атрибута href в отличие от атрибута for , и снова мы смогли удалить любую ссылку на переключатели.

Поскольку теперь мы используем :target to… well… target для наших различных разделов, все селекторы :checked + были заменены соответствующими селекторами :target . В то время как раньше у нас мог быть один :checked + селектор для этих правил, путь :target работает, мы должны продублировать наш селектор для каждого другого :target URI.

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

С учетом вышесказанного, если мы действительно хотим сделать эту демонстрацию доступной для всех, есть некоторые дополнительные функции ARIA, которые должны применяться к различным областям щелчков, которые визуально оформлены в виде кнопок, но на самом деле являются ссылками (что на самом деле дело по причинам доступности, всем). И простого добавления функций ARIA будет недостаточно, так как при изменении состояния атрибуты, такие как aria-hidden , должны быть обновлены, а фокусировка элемента должна сместиться между последним активным элементом и новым активным экраном, для чего требуется JavaScript. Тем не менее, JavaScript будет гораздо меньше, чем в оригинальной версии этого примера.

Дополнительным доводом «за» или «против» в этом примере является то, что если кто-то знает или добавляет в закладки URI, использованный для обновления макета, он может обойти нормальное состояние нашей страницы. Опять же, это может быть за или против в зависимости от ваших целей UX. Но это то, что нужно иметь в виду.

В заключение…

CSS является мощным и может делать МНОГО вещей, которые мы привыкли полагаться на JavaScript или jQuery. Но мы должны с осторожностью относиться к созданию кошмаров о доступности, если слишком сильно опираемся на CSS. Я надеюсь, что эти примеры показывают, что есть много практических экспериментов, которые мы можем провести только с помощью CSS, и заставят вас задуматься о различных вариантах использования для создания удивительных пользовательских интерфейсов.

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

И, как и было обещано, здесь есть архив всех исходных файлов для демонстраций в этой статье. Наслаждайтесь!