Несколько лет назад веб-разработчики не могли реализовать и построить столько всего, используя только CSS и не полагаясь на JavaScript. Но сегодня CSS настолько зрел, что способен делать мощные вещи без написания ни одной строки JavaScript. Возможно, вы также прочитали несколько статей о «подходах только к CSS», которые демонстрируют мощь CSS.
Когда речь идет о подходах только для CSS, мы не можем игнорировать селектор псевдокласса :checked , который я собираюсь использовать в этом посте. Конечно, я не первый, кто пишет об этой технике, и были и другие более широкие дискуссии, касающиеся использования элементов формы в качестве замены JavaScript. Например, эта статья Adobe Луиса Лазариса и это великолепное слайд-шоу Райана Седдона .
Использование :checked
Короче говоря, селектор псевдокласса :checked представляет (выбирает) любой элемент радио или флажок, который отмечен или выбран. Пользователь может изменить состояние этих элементов, установив флажок или выбрав другое значение в наборе переключателей.
Прежде чем мы углубимся в глубину, взгляните на финальную демонстрацию, чтобы понять, что мы будем создавать в этом уроке:
Теперь давайте начнем.
Построение окна настроек
В демоверсии вы должны были заметить значок шестеренки и то, как при нажатии появляется окно с некоторыми опциями. Прежде чем мы продолжим объяснение HTML и CSS, составляющих это поле, взглянем на следующий код:
/* we don't want the input fields to appear, all we need is the labels */ input[type="checkbox"], input[type="radio"] { position: absolute; visibility: hidden; } .settings-box-element { z-index: 10; }
Поскольку мы заинтересованы только в отображении меток, приведенный выше код используется для скрытия флажков и переключателей. Более того, все метки имеют класс settings-box-element со свойством z-index чтобы убедиться, что метки останутся поверх любых других элементов на странице.
Теперь мы можем разбить код, который составляет окно настроек. Начнем с кнопки передач. Вот HTML-код:
<!-- the gear icon that opens the box when you click on it --> <input id="settings-btn" class="settings-btn" type="checkbox"> <label for="settings-btn" class="settings-box-element"></label>
И CSS:
.settings-btn + label { position: fixed; top: 130px; right: 0; display: block; width: 35px; color: #e83737; text-align: center; background: #fff; cursor: pointer; }
Если вы читали одну или две статьи об использовании элементов формы в качестве замены JavaScript, то вы уже должны знать, что нам нужно использовать элементы input и label вместе, чтобы в случае удаления одного из двух элементов ничего не работало. Таким образом, у нас есть флажок ввода с id="settings-btn" и метка с атрибутом for который соответствует значению id . Я также добавил класс settings-btn для использования в нашем хуке CSS.
В CSS метке присваивается position: fixed объявление с соответствующими свойствами / значениями направления (сверху и справа).
Далее идет белая коробка, которая будет практически содержать кнопки:
HTML первый:
<!-- the white box that contains the buttons --> <div class="buttons-wrapper settings-box-element"></div>
И CSS:
.buttons-wrapper { position: fixed; top: 130px; right: -200px; /* should match element width */ width: 200px; height: 240px; background: #fff; }
Box представляет собой отдельный элемент div с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил ранее, последний класс в основном используется для придания элементам значения z-index . «Кнопки-обертки» используются для div элемента div . И, как вы можете видеть, div получил ширину 200px и высоту 240px для размещения 5 кнопок, которые вы видите в демоверсии. Кроме того, div получает fixed значение position и соответствующие свойства right и top . Единственное, что вам нужно иметь в виду, это то, что right свойство должно иметь то же значение, что и ширина, но в отрицательном значении (чтобы оно исчезло из области просмотра).
Теперь давайте посмотрим на код оставшейся разметки, то есть 5 кнопок. Комментарии обозначают стили фона, которыми они управляют:
<!-- background styles --> <!-- light background (#eaeaea) --> <input id="light-layout" class="light-layout" type="radio" name="layout" checked> <label for="light-layout" class="layout-buttons settings-box-element"> Light Background</label> <!-- dark background (#494949) --> <input id="dark-layout" class="dark-layout" type="radio" name="layout"> <label for="dark-layout" class="layout-buttons settings-box-element"> Dark Background </label> <!-- image background --> <input id="image-layout" class="image-layout" type="radio" name="layout"> <label for="image-layout" class="layout-buttons settings-box-element"> Image Background</label> <!-- pattern background --> <input id="pattern-layout" class="pattern-layout" type="radio" name="layout"> <label for="pattern-layout" class="layout-buttons settings-box-element"> Pattern Background</label> <!-- hide/show content --> <input id="hide-show-content" class="hide-show-content" type="checkbox"> <label for="hide-show-content" class="layout-buttons settings-box-element"> Hide/Show content</label>
А вот и CSS:
.layout-buttons { display: block; width: 150px; padding: 10px 0; text-align: center; border: 2px solid black; box-sizing: border-box; font-size: 0.875em; cursor: pointer; } .light-layout + label { position: fixed; top: 140px; right: -150px; } .dark-layout + label { position: fixed; top: 185px; right: -150px; } .image-layout + label { position: fixed; top: 230px; right: -150px; } .pattern-layout + label { position: fixed; top: 275px; right: -150px; } .hide-show-content + label { position: fixed; top: 320px; right: -150px; }
Обратите внимание, что первому флажку был присвоен атрибут «флажок». Это потому, что мы хотим, чтобы он был выделен по умолчанию.
Каждое поле ввода имеет id а каждая метка имеет атрибут for который соответствует id одного из полей ввода. И, как вы можете знать, а может и не знать, секрет такой техники заключается в атрибуте for , потому что при щелчке по метке с атрибутом for выбирается / проверяется элемент, связанный с этой конкретной меткой, что позволяет нам использовать :checked селектор.
Все вышеперечисленные метки имеют класс «макет-кнопок». Этот класс используется для задания кнопок по умолчанию и общих стилей, таких как ширина, отступы, границы и т. Д. Другие классы используются для добавления уникальных стилей к каждому из них. И как вы видели для значка шестеренки и белого поля, свойство position используется с fixed значением и соответствующими свойствами top и right . Обратите внимание, что top значение для каждой метки на 45px больше, чем предыдущее; это сделано для того, чтобы кнопки складывались друг над другом красиво и без наложений. Также обратите внимание, что right значение свойства такое же, как ширина кнопок, но отрицательное.
Теперь взглянем на последнюю часть нашего кода CSS:
input[type="radio"]:checked + label { background: #e83737; color: #fff; border-color: #e83737; }
Приведенный выше CSS используется для изменения стилей по умолчанию для ярлыка, связанного с выбранным переключателем (у нас есть 4 переключателя). Я использовал соседний селектор брата для нацеливания на каждую метку, которой предшествует поле ввода типа «радио». Итак, как вы можете видеть, свойствам background и border было присвоено значение #e83737 (красноватый цвет), а свойству color — значение #fff . Ничего особенного или сложного.
Остальные элементы в HTML будут заключены в div :
<div class="main-wrapper"> <div class="content"> <h1>Cool stuff with CSS only!</h1> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
Обратите внимание, что в приведенном выше коде я расположил каждый элемент окна настроек независимо, где я мог бы просто обернуть их все в элемент div или section и расположить этот единственный элемент, что упростило задачу. Это сделано просто потому, что вы не можете выбрать родительский элемент, только родного брата.
Таким образом, в этом случае весь основной контент заключен в div с class="main-wrapper" . И как вы увидите позже, чтобы иметь возможность изменить стили для этого div , нам нужно выбрать этот div , написав что-то похожее на это:
input[type="checkbox"]:checked ~ main-wrapper { /* some styles here */ }
Здесь я использую общий селектор братьев и сестер, чтобы выбрать основной div , который является единственным способом сделать это.
Нажав на значок шестеренки
При нажатии на значок шестеренки должно появиться окно настроек. Вот код, чтобы это произошло:
.settings-btn:checked + label { right: 200px; /* match width of .buttons-wrapper */ } .settings-btn:checked ~ .buttons-wrapper { right: 0; } .settings-btn:checked ~ .layout-buttons { right: 30px; }
Когда пользователь нажимает на значок шестеренки, будет установлен флажок с id="settings-btn" , и тут придет волшебство. После нажатия на значок шестеренки произойдет следующее:
-
Используя соседний селектор (
+), метка, которая появляется сразу после этого флажка, будет выбрана, а затем перемещена на 200 пикселей справа от области просмотра. -
Используя общий селектор брата
~, элементы с классами «button-wrapper» и «layout-button» будут выделены, а затем перемещены так, чтобы они были 0 пикселей и 30 пикселей, соответственно, справа от области просмотра.
И соседний селектор брата, и общий селектор брата здесь необходимы, так как этот метод не будет работать без них.
Смена фона
Позвольте напомнить вам код HTML для переключателей:
<!-- background styles --> <!-- light background (#eaeaea) --> <input id="light-layout" class="light-layout" type="radio" name="layout" checked> <label for="light-layout" class="layout-buttons settings-box-element"> Light Background</label> <!-- Plus 3 other radio buttons/labels... -->
Фон, который мы будем изменять, это фон элемента .main-wrapper . Вот CSS:
.light-layout:checked ~ .main-wrapper { background: #eaeaea; } .dark-layout:checked ~ .main-wrapper { background: #494949; } .image-layout:checked ~ .main-wrapper { background: url(image url) no-repeat center 0 fixed; } .pattern-layout:checked ~ .main-wrapper { background: url(images/pattern1.png) repeat; }
Вы можете видеть, что в HTML у нас есть 4 элемента ввода type="radio" и 4 метки. При щелчке по любой из меток вход, связанный с этой конкретной меткой, будет выбран и, следовательно, сопоставлен псевдоклассом :checked . Затем, в зависимости от того, какая метка нажата, один из четырех вышеуказанных стилей будет применен к основной оболочке.
Скрытие / Отображение контента
Для элемента show / hide я использую флажок:
<!-- hide/show content --> <input id="hide-show-content" class="hide-show-content" type="checkbox"> <label for="hide-show-content" class="layout-buttons settings-box-element"> Hide/Show content</label>
А вот и CSS:
.hide-show-content:checked ~ .main-wrapper .content { display: none; }
В этом случае мы сообщаем браузеру выбрать элемент с class="content" и выставить его на display: none », когда пользователь нажимает на соответствующую метку, поэтому ставит флажок.
Вывод
Есть много других вещей, которые вы можете сделать, используя эту технику выбора, и предел — ваше собственное творчество. Если этот метод является новым для вас, я надеюсь, что эта статья может послужить отправной точкой для экспериментов с другими возможностями.
Ниже вы найдете готовую демонстрацию: