Возможность настройки сайтов пользователем: применяем переменные CSS

Возможность настройки сайтов пользователем: применяем переменные CSS

От автора: настраиваемые сайты. Я уверен, вы имели с ними дело и раньше. Настройка сайта дает пользователю возможность адаптировать его. Как будто пользователи могут им управлять. Ниже приведён наш базовый пример.

Итак, насколько легко это можно сделать с помощью переменных CSS? Давайте посмотрим. Это будет занимательно! Вам понравится.

Обратите внимание: Эта статья является отрывком из Профессионального руководства по CSS (платный курс из 85 уроков). Советую его пройти. Вот такая бессовестная реклама ;)

Что мы на самом деле хотим сделать

Прелесть переменных CSS заключается в их обратной связи. Как только они обновляются, независимо от того, какое свойство принимает значение от переменной CSS, оно тоже обновляется. Ниже представлено изображение, поясняющее данный принцип.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Ну, по этой теме всё. Ой, ещё кое-что. Когда я говорю, что переменной CSS задаётся другое значение, как это происходит?

Переменные CSS будут оказывать влияние даже тогда, когда они заданы во встроенных стилях. С помощью Javascript мы можем получить корневой документ и задать новое значение для встроенной переменной CSS. Это понятно? Меньше разговоров, давайте займёмся делом.

Исходная разметка

Вот так выглядит нужная нам исходная разметка:

Эта разметка состоит из трёх кнопок внутри родительного элемента.theme. Для краткости я обрезал содержимое внутри элемента article. Внутри этого элемента article находится содержимое страницы.

Стили страницы

Этот проект начинается со стилей страницы. Здесь всё просто. Вместо того, чтобы постоянно настраивать background-color и color страницы, мы сделаем так, чтобы они основывались на переменных. Вот, что я имею в виду.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Итак, давайте продолжим и приступим к обновлению из Javascript.

Переходим к Javascript

Дальше я собираюсь задать Javascript, необходимый для этого проекта.

Пусть это вас не пугает. На самом деле, всё гораздо проще, чем кажется. Во-первых, у нас есть ссылка на корневой элемент, const root = document.documentElement

Корневым элементом здесь является элемент HTML. Скоро вы поймёте, почему это так важно. Если вам любопытно, это нужно для того, чтобы задать новое значение переменной CSS.

Кроме этого, у нас есть ссылка и на кнопки, const themeBtns = document.querySelectorAll(‘.theme > button’)
querySelectorAll задает массив в виде структуры данных, которые мы можем обработать через цикл. Выполните перебор каждой из кнопок и добавьте к ним прослушивателя событий, а именно клика. Что мы получаем:

Где функция handleThemeUpdate? Это мы и обсудим. Каждая кнопка после нажатия будет иметь handleThemeUpdate в качестве функции обратного вызова. Важно учесть, какая кнопка была нажата и потом выполнять нужную операцию.

С учётом вышесказанного, используется переключатель operator и осуществляются операции, основанные на значении кнопки, которая была нажата. Просмотрите ещё раз блок кода Javascript, это поможет вам лучше разобраться. Просмотреть проект полностью вы можете на codepen.

Автор: Ohans Emmanuel

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree