Mastering Modern CSS: Unleashing @property and @supports for Dynamic Designs

CSS @property Rule The CSS @property rule lets developers declare custom properties (CSS variables) with types, default values, and inheritance. It provides typed CSS variables that are more stable and easier to use in animations. 1. Syntax @property --variable-name { syntax: ""; /* Defines the type (color, length, number, etc.) / inherits: true | false; / Specifies if it should be inherited / initial-value: value; / Sets a default value */ } Example: Typed CSS Variable @property --main-color { syntax: ""; inherits: true; initial-value: blue; } div { background-color: var(--main-color); }

Feb 11, 2025 - 16:44

Mastering Modern CSS: Unleashing @property and @supports for Dynamic Designs

CSS @property Rule

The CSS @property rule lets developers declare custom properties (CSS variables) with types, default values, and inheritance. It provides typed CSS variables that are more stable and easier to use in animations.

1. Syntax

@property --variable-name {
  syntax: "";  /* Defines the type (color, length, number, etc.) */
  inherits: true | false;  /* Specifies if it should be inherited */
  initial-value: value;    /* Sets a default value */
}

Example: Typed CSS Variable

@property --main-color {
  syntax: "";
  inherits: true;
  initial-value: blue;
}

div {
  background-color: var(--main-color);
}