syntax

Describes the allowable syntax for the property.

inherits

Controls whether the custom property registration specified by @property inherits by default.

initial-value

Sets the initial value for the property.

A valid @property rule represents a custom property registration, with the property name being the serialization of the in the rule's prelude.

@property rules require a syntax and inherits descriptor; if either are missing, the entire rule is invalid and must be ignored. The initial-value descriptor is optional only if the syntax is the universal syntax definition, otherwise the descriptor is required; if it's missing, the entire rule is invalid and must be ignored.

Unknown descriptors are invalid and ignored, but do not invalidate the @property rule.

Add type checking to --my-color custom property, as a color, a default value, and not allow it to inherit its value:

Using CSS @property at-rule:

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript CSS.registerProperty:

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

@property = 
  @property <custom-property-name> { <declaration-list> }  

• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• CSS Houdini