0Pricing
CSS Academy · Урок

API свойств и значений CSS (@property)

Регистрируйте пользовательские свойства с типами и наследованием с помощью @property для создания анимируемых переменных CSS.

«API свойств и значений CSS (@property)» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое @property

@property — это способ CSS зарегистрировать пользовательское свойство, указав его тип, поведение наследования и начальное значение. Это декларативная форма API свойств и значений CSS (CSS.registerProperty).

Синтаксис @property

Зарегистрируйте пользовательское свойство с помощью трёх обязательных дескрипторов:

<div class="box"></div>

Дескриптор syntax

Дескриптор syntax определяет тип свойства с помощью имён типов CSS:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — принимает любое значение (как незарегистрированное свойство)

Дескриптор inherits

Управляет тем, наследуется ли свойство через DOM. Установите false для свойств, которые должны быть изолированы в пределах одного элемента.

Дескриптор initial-value

Задаёт гарантированное начальное значение, если свойство не установлено. Благодаря этому свойство можно анимировать.

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

Главное преимущество @property заключается в том, что зарегистрированные пользовательские свойства можно изменять посредством переходов и анимировать: браузер знает их тип и может интерполировать значения между собой.

<div class="element is-hovered"></div>

Без @property

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

@property для анимации градиентов

Анимация остановок градиента, ранее невозможная без @property:

<div class="loader loading"></div>

Эквивалент на JavaScript

Зарегистрировать свойства можно также с помощью API JavaScript:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Поддержка браузерами

@property поддерживается в Chrome 85 и более поздних версиях, Edge 85 и более поздних версиях, Safari 16.4 и более поздних версиях, а также Firefox 128 и более поздних версиях. Возможность широко доступна в современных браузерах.

Практическое применение @property

Распространённые варианты использования:

  • Анимация положения и цветов градиента
  • Анимация оттенка и насыщенности цветов HSL
  • Анимация заполнения индикатора выполнения
  • Анимация счётчиков при отображении чисел
  • Плавные переходы между тёмной и светлой темами с помощью анимации цветовых токенов

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

Почему для анимации пользовательских свойств CSS требуется @property?

Итоги

@property регистрирует пользовательские свойства с типом syntax, флагом inherits и значением initial-value. Зарегистрированные свойства можно анимировать и изменять посредством переходов, поскольку браузер способен интерполировать их типизированные значения. Это делает возможными анимации градиентов, переходы оттенков и анимации счётчиков, которые невозможны для незарегистрированных пользовательских свойств.

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

Урок «API свойств и значений CSS (@property)» бесплатный?

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

Чему я научусь в уроке «API свойств и значений CSS (@property)»?

Регистрируйте пользовательские свойства с типами и наследованием с помощью @property для создания анимируемых переменных CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «API свойств и значений CSS (@property)»?

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

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

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

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

  1. Типизированная объектная модель CSS (OM)
  2. API свойств и значений CSS (@property)
  3. API рисования CSS: рабочие модули
  4. API компоновки CSS и область действия
← Назад к CSS Academy