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

@property (at-правило) позволяет разработчикам определять собственные свойства. В этом посте мы рассмотрим, что такое @property, чем он полезен и как его использовать, на практических примерах.

Что такое At-правило @property?

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

Правило @property представляет собой регистрацию пользовательского свойства непосредственно в таблице стилей без необходимости запуска JS.

Основной синтаксис

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• синтаксис: определяет ожидаемый тип данных свойства. В данном случае это цвет (), но это может быть любой допустимый тип данных CSS, например , или .
• наследует: определяет, должно ли значение свойства наследоваться дочерними элементами. Для него может быть установлено значение true или false.
• начальное значение: устанавливает значение по умолчанию для свойства, если оно не указано.

Когда использовать @property

• Когда вам нужно анимировать или переместить пользовательское свойство, чтобы обеспечить плавное поведение.
• Чтобы обеспечить соблюдение типов данных (таких как цвета, длины или числа), чтобы избежать ошибок из-за недопустимых значений.
• Чтобы установить значения по умолчанию для пользовательских свойств, чтобы обеспечить единообразие стилей при отсутствии значений.
• Управление наследованием пользовательских свойств между родительскими и дочерними элементами.

Читать далее

• Документы MDN @property

Исходное сообщение