Работа с CSS переменными

Что такое CSS переменные

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

У браузеров разные возможности и они могут поддерживать разные версии веб стандартов, поэтому веб-разработчики должны учитывать поддержку браузеров при создании и тестировании веб-сайтов. Чтобы убедиться в том, что сайт совместим с определённым браузером, веб-разработчики могут использовать комбинацию ручного тестирования и таких инструментов, как платформы для тестирования совместимости браузеров. Однако необходимо помнить, что разные версии одного и того же браузера могут иметь разный уровень поддержки веб-стандартов, поэтому может потребоваться тестирование нескольких версий браузера. Следующие браузеры поддерживают CSS переменные:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari.

Зачем изучать CSS переменные

Использование CSS переменных имеет ряд преимуществ, среди которых можно выделить:

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

Как объявить CSS переменную

Вы можете хранить такие значения, как цвета, размеры шрифтов и другие стили, многократно используемые на сайте. CSS переменная определяется с помощью двух тире, --, и чтобы объявить переменную CSS, вы используете префикс --, за которым следует имя переменной. Например:

:root {
  --main-color: blue;
}

В приведённом примере будет создана переменная --main-color со значением blue.

Обращение к CSS переменным

Для использования переменной в CSS на неё можно сослаться с помощью функции var() в CSS правилах. Например:

:root {
  --main-color: blue;
  --txt-color: white;
}
body {
  color: var(--main-color);
}
h1 {
  color: var(--txt-color);
}

Приведённый выше пример устанавливает свойство color элемента body равным значению переменной --main-color, blue. Кроме того, свойство color элемента h1 устанавливается равным значению переменной --txt-color, white.

Непосредственное объявление переменных CSS

Переменные можно объявить непосредственно в стилях элемента с помощью атрибута style, как показано ниже:

<div style="--main-color: blue;"></div>

В приведённом примере этот элемент будет иметь синий цвет.

Наследование CSS переменных

Важно отметить, что переменные CSS наследуются по умолчанию. Таким образом, если CSS переменная не определена в элементе, она будет наследоваться от его родительского элемента. Однако вы можете отменить наследование, определив переменную в компоненте. Пример:

:root {
  --main-color: blue;
}
body {
  color: var(--main-color);
}

В этом примере переменная --main-color устанавливается для псевдокласса :root, представляющего корневой элемент документа. Затем элемент body наследует эту переменную, чтобы установить синий цвет текста.

Как использовать переменные CSS

Чтобы использовать CSS переменные, сначала необходимо определить их с помощью префикса --, за которым следует имя переменной. Например:

See the Pen

В приведённом примере определяется переменная --main-color со значением blue и --txt-color со значением white. Псевдокласс :root ссылается на корневой элемент документа, что делает переменную доступной во всем документе.

Переопределение значения CSS переменной

Для переопределения значения переменной CSS вы можете задать её значение, используя префикс -- и имя переменной, за которым следует задаваемое значение. Кроме того, задайте её снова в другой области видимости. Например:

See the Pen

В этом примере значение переменной --main-color по умолчанию blue, но для элемента body оно переопределено на green.

Определение значения по умолчанию для переменной

С помощью функции var() можно указать значение переменной по умолчанию. Например:

body {
  color: var(--main-color, blue);
}

Если CSS переменная --main-color не определена, она создаётся с указанным значением (blue) и задаёт значение для свойства color элемента body.

Использование CSS переменных для шрифта

Вы можете хранить в CSS переменных такие значения, как font-size и другие стили, многократно используемые в проекте.

See the Pen

Синтаксис CSS функции var()

Функция var() — CSS функция, используемая для установки значения пользовательского свойства (также известного как "CSS переменная") в определённое значение. Она используется в CSS правила для указания значения пользовательского свойства. Синтаксис функции var() следующий: var(--custom-name, value)

• Параметр --custom-name — имя пользовательского свойства/CSS переменной, которому вы хотите присвоить значение. Это обязательный параметр, и имя переменной должно начинаться с двух тире --.
• value — значение, устанавливаемое CSS переменной/пользовательскому свойству. Если CSS переменная не существует, она создаётся с указанным значением, и это необязательный параметр.

Область видимости переменных CSS

Переменные CSS имеют определённую область видимости, задающую, где они могут быть доступны и использованы. Область видимости CSS переменной задаётся тем, где она определена. Поэтому переменные CSS можно определять на следующих уровнях:

• Глобальный уровень: Эти CSS переменные, определённые на глобальном уровне, доступны из любой точки документа. Они определяются вне любого селектора с помощью псевдокласса :root.
• Локальный уровень: CSS переменные, определённые на локальном уровне, доступны только в пределах определённого элемента и его дочерних элементов.

Как определить CSS переменные на глобальном и локальном уровнях

Для определения CSS переменной на глобальном уровне используется псевдокласс :root. Например:

:root {
  --main-color: red;
}

На локальном уровне CSS переменную определяется также как и на глобальном с помощью --.

button {
  --main-color: blue;
  color: var(--main-color);
}

Как получить доступ к CSS переменным с JavaScript

Переменные CSS живут в DOM, а это значит, что к ним можно обращаться с JavaScript. Чтобы получить доступ к значению переменных, мы сначала задаём их в таблице стилей:

:root {
  --primaryColor: #5f58bf;
}

Теперь обратимся к значению переменной, объявленной в селекторе :root :

// Получаем элемент :root
const root = document.querySelector(":root");

//Получаем свойства стиля в root
const style = getComputedStyle(root);

//Получаем значение свойства стиля из root
const primaryColor = style.getPropertyValue("--primaryColor");

//Проверяем, есть ли у нас доступ к переменной CSS
console.log(primaryColor);

Если вы проверите консоль, у в ней должно отобразиться значение #5f58bf, показывающее, что JavaScript получил доступ к переменной.

Этот код позволяет получить доступ к значению переменной --primaryColor, объявленной в селекторе root. Используя getComputedStyle и getPropertyValue, можно получить значение переменной и сохранить его в primaryColor. В данном случае значение primaryColor будет #5f58bf. Теперь мы можем обновить значение переменной с JavaScript.

Как обновить CSS переменные с помощью JavaScript

Для обновления CSS переменных с помощью JavaScript, сначала мы задаём их в таблице стилей, получаем к ним доступ, а затем обновляем их.

<!doctype html>
<html>
  <head>
    <style>
      :root {
        --primaryColor: blue;
      }
      p {
        color: var(--primaryColor);
      }
    </style>
  </head>
  <body>
    <p>CSS variables</p>
  </body>
  <script>
    //Получаем элемент root
    const root = document.querySelector(":root");
    //Изменяем значения переменной в root
    root.style.setProperty("--primaryColor", "pink");
  </script>
</html>

В этом коде мы установили синий цвет параграфа в таблице стилей, а затем изменили его на розовый с помощью JavaScript.

Обновление переменных CSS с помощью JavaScript может быть полезным, если нужно предоставить пользователям контроль над стилями CSS. Чтобы лучше проиллюстрировать это, давайте создадим простую веб-страницу Custom styles, на которой пользователи смогут настраивать фон и цвет текста с помощью переменных CSS и JavaScript.

See the Pen

В приведённом выше JavaScript коде мы получаем цвета с помощью соответствующих ID. Затем добавляем слушателей событий для каждого вводимого цвета, чтобы при изменении цвета пользователем соответствующая переменная CSS обновлялась с новым значением.

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

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

Заключение

Используя переменные CSS и JavaScript, можно эффективно настраивать и обновлять значения стилей, сокращая избыточность кода. Такой подход позволяет упростить обслуживание и обеспечить гибкость при внесении изменений в дизайн. Кроме того, интеграция переменных CSS с JavaScript даёт пользователям больший уровень контроля над стилями CSS наших веб-страниц. Открыв определённые переменные CSS в пользовательском интерфейсе, мы можем позволить им настраивать и персонализировать внешний вид сайта в соответствии со своими предпочтениями.