PricingLoginStart free
Frontend Academy · Урок

Пользовательские свойства CSS: объявление и обновление

Объявляйте переменные с помощью -- в :root, обращайтесь к ним через var() и динамически обновляйте их с помощью JavaScript для изменения темы в реальном времени.

Урок 1 из 413 шагов

«Пользовательские свойства CSS: объявление и обновление» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Итоги: объявление и область действия

Пользовательские свойства CSS объявляются с префиксом -- на любом элементе. Свойства, объявленные на :root, доступны глобально. Дочерние элементы наследуют значения и могут переопределять их локально.

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

Динамические обновления с помощью JavaScript

Пользовательские свойства можно изменять во время выполнения. Используйте element.style.setProperty('--name', value) для переопределений на уровне элемента или обновите глобальную переменную на :root, чтобы мгновенно изменить её для всех использующих её элементов.

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

Чтение значений пользовательских свойств в JS

Прочитайте пользовательское свойство с помощью getComputedStyle(element).getPropertyValue('--name').trim(). Этот способ считывает вычисленное (с учётом каскада) значение, а не только значение из встроенного стиля.

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

Анимация пользовательских свойств

Браузер может интерполировать пользовательские свойства с помощью @property (Houdini) или использовать их в переходах в сочетании с calc(). Без @property браузеры не могут напрямую выполнять переход между значениями переменной.

@property — Зарегистрированные пользовательские свойства

Правило CSS @property регистрирует пользовательское свойство с указанием типа, начального значения и правила наследования. Зарегистрированные свойства можно нативно использовать в переходах и анимации.

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

Системы токенов с пользовательскими свойствами

Модель токенов дизайна: храните все решения по дизайну как пользовательские свойства. Компоненты используют токены, а не жёстко заданные значения. Изменение токена распространяется повсюду.

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

Адаптивные пользовательские свойства

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

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

Пользовательские свойства в calc()

Используйте переменные внутри calc() для вычисления производных отступов и размеров. Это создаёт целостную и математически согласованную систему размеров.

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

Темизация нескольких брендов

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

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

Пользовательские свойства в SVG

Атрибуты SVG, такие как fill и stroke, могут использовать пользовательские свойства. Это позволяет оформлять значки с помощью CSS, не изменяя разметку SVG.

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

Отладка пользовательских свойств

В DevTools браузера Chrome выберите элемент и откройте вкладку «Вычисленные», чтобы увидеть значения пользовательских свойств. На панели стилей показано, где объявлена каждая переменная. В разделе «Унаследованные» отображаются переменные родительских элементов.

Быстрая проверка

Какой метод JavaScript обновляет пользовательское свойство CSS на элементе?

Ответь в интерактивном уроке

Итоги: пользовательские свойства CSS от начала до конца

Объявляйте свойства на :root для глобальных значений, а для локальной области действия переопределяйте их у дочерних элементов. Обновляйте их с помощью style.setProperty из JS. Считывайте значения с помощью getComputedStyle. @property включает нативные переходы. Используйте свойства как токены дизайна для единого источника истины. Переопределяйте их в медиазапросах для адаптивных токенов.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
41
Уроки
163
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Пользовательские свойства CSS: объявление и обновление» бесплатный?

Да — полный текст урока «Пользовательские свойства CSS: объявление и обновление» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Пользовательские свойства CSS: объявление и обновление»?

Объявляйте переменные с помощью -- в :root, обращайтесь к ним через var() и динамически обновляйте их с помощью JavaScript для изменения темы в реальном времени. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Пользовательские свойства CSS: объявление и обновление»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Пользовательские свойства CSS: объявление и обновление
  2. Переходы: свойство, длительность и тайминг
  3. Анимации @keyframes
  4. Учет prefers-reduced-motion
← Назад к Frontend Academy