Переключение стилей CSS на веб-сайте дает пользователю эффектное ощущение, что он сам настраивает под себя веб-ресурс. Лет 15 назад такое действие удавалось осуществлять единицам, потому что инструментов для этого не было и приходилось все решать «костылями».
А по сути, переключение стилей CSS на веб-ресурсе открывает веб-дизайнерам возможность реализовать несколько видов стилей для одного и того же ресурса. На многих ресурсах уже реализовано переключение темы сайта «день-ночь». Кстати, переключение «день-ночь» на веб-ресурсах не является прихотью их владельцев. Компания Гугл рекомендует внедрять подобное переключение, так как людям с некоторыми нарушениями зрения легче просматривать веб-страницу в «темной» теме.
Переключение стилей CSS
С технической стороны переключение стилей CSS — это когда на одном элементе или целой веб-странице реализуется несколько таблиц стилей, которые можно переключать между собой. Переключение стилей может быть реализовано по-разному. Например:
по времени, когда стили чередуются между собой спустя какой-то временной промежуток;
реакция на действия пользователя, когда стиль меняется в зависимости от того, что делает пользователь на странице;
при помощи кнопки, когда переключение между стилями происходит принудительно, если нажать кнопку или перевести «ползунок» в другое положение;
и др.
В зависимости от события, влияющего на переключение стилей CSS и способностей программиста, оно может быть реализовано разными путями. Например:
при помощи возможностей самой таблицы стилей;
с использованием библиотек jQuery и/или jQuery UI;
при помощи языка программирования, например: JavaScript, PHP, Python, Java и др.
Самая несложная реализация переключения стилей осуществляется при помощи возможностей CSS и/или JavaScript. Неважно, каким способом происходит само переключение — во всех случаях нужно, чтобы было продумано несколько разных таблиц стилей, между которыми будет налажено переключение.
Переключение стилей при помощи чистого CSS
Переключение стилей при помощи чистого CSS осуществляется через псевдокласс «:checked». Такой способ подходит, если нужно организовать переключение при помощи воздействия пользователя на элемент. Псевдокласс «:checked» обозначает состояние элемента, к которому он привязан. Обычно его привязывают к чекбоксу или радиокнопке. Таким образом, пользователь сам может изменять состояние элемента, если отметит чекбокс или выберет определенную радиокнопку.
Как реализовать переключение стилей CSS кодом
Мы покажем, по какому принципу реализуется смена стилей при помощи псевдокласса «:checked». Допустим, у вас на сайте есть чекбокс из 4-х компонентов. При выборе одного из компонентов должна происходить смена стилей. К примеру, в стилях у нас будет указана смена фона какого-то HTML-блока.
Код HTML будет примерно таким:
<!—включаем фон посветлее (#eaeaea) -->
<input id="lighter-layout" class="lighter-layout" type="radio" name="MyLayout" checked>
<label for="lighter-layout" class="MyLayout-buttons settings-box-element">
Lighter Background</label>
<!—включаем фон потемнее (#494949) -->
<input id="darker-layout" class="darker-layout" type="radio" name="MyLayout">
<label for="darker-layout" class="MyLayout-buttons settings-box-element">
Darker Background
</label>
<!—Подключаем изображение вместо цвета фона -->
<input id="picture-layout" class="picture-layout" type="radio" name="MyLayout">
<label for="picture-layout" class="MyLayout-buttons settings-box-element">
Picture Background</label>
<!— Подключаем паттерн-шаблон изображения вместо цвета -->
<input id="template-layout" class="template-layout" type="radio" name="MyLayout">
<label for="template-layout" class="template-buttons settings-box-element">
Template Background</label>
Для радиокнопок мы не укажем собственный стиль — это вы сделаете сами. В собственном стиле отразится, как они должны выглядеть и где должны располагаться. Мы покажем, как будет выглядеть псевдокласс «:checked».
Код CSS будет таким:
.lighter-layout:checked {
background: #eaeaea;
}
.darker-layout:checked {
background: #494949;
}
.picture-layout:checked {
background: url(image url) no-repeat center 0 fixed;
}
.template-layout:checked{
background: url(images/template.png) repeat;
}
Заключение
Переключение стилей при помощи возможностей самого CSS стало возможным благодаря псевдоклассам. Вообще, CSS с каждым обновлением становится функциональней и понемногу отбирает функциональности у JavaScript. На данный момент реализация большинства «плюшек» на веб-странице не требует знания JavaScript, а ограничивается пониманием возможностей CSS.
Другое
