css @property rule

The @property rule is used to define custom CSS properties directly in the stylesheet without having to run any JavaScript.

The @property rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not.

Example of defining a custom property:

@property --myColor {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}

The definition above says that –myColor is a color property, it can inherit values from parent elements, and its default value is lightgray.

To use the custom property in CSS, we use the var() function:

body {
  backgound-color: var(--myColor);
}

The benefits of using @property:

Type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly
Set default value: You set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the defined fallback value
Set inheritance behavior: You must specify whether the custom property can inherit values from its parent elements or not