CSS @property rule

Definition and Usage

CSS @property Rules are used to define custom CSS properties directly in style sheets without running any JavaScript.

@property Rules have data type checking and constraint features, can set default values, and define whether the property can inherit values.

Using @property The Benefits:

• Type Checking and Constraints: It is necessary to specify the data type of the custom property, such as <number>, <color>, <length>, etc. This can prevent errors and ensure the correct use of custom properties.
• Setting Default Values: You can set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser will use the defined fallback value.
• Setting Inheritance Behavior: It is necessary to specify whether the custom property can inherit values from its parent element.

Example: Define Custom Properties

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

The above definition indicates that --my-color is a color property that can inherit values from its parent element and has a default value of lightgray.

Using Custom Properties in CSS:

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

Instance

Example 1

Specify two custom properties for the gradient - and use them to animate the gradient:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Try it yourself

Example 2

Specify two custom properties: one for item size and one for item color:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Try it yourself

CSS syntax

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Property value

Browser support

The numbers in the table represent the browser version that first fully supports the @ rule.

Related Pages

Tutorial:CSS @property rule