@property CSS At-Rule

Description

The @property at-rule is a CSS Houdini API that allows developers to explicitly define custom properties. It provides a number of benefits over the traditional way of defining custom properties using the var() function, including:

• Property type checking and constraining: The @property at-rule allows developers to specify the type of values that a custom property can accept. This can help to prevent errors and ensure that custom properties are used consistently.


• Setting default values: The @property at-rule allows developers to set default values for custom properties. This can be useful for cases where a custom property is not explicitly set on an element.


• Defining whether a custom property can inherit values or not: The @property at-rule allows developers to specify whether a custom property can inherit values from its parent elements. This can be useful for controlling the cascade behavior of custom properties.

Syntax

@property <property-name> {
  <property-type> <initial-value>;
  <inherits> <true | false>;
}

Values

• syntaxDescribes the allowable syntax for the property.
• inheritsControls whether the custom property registration specified by @property inherits by default.
• initial-valueSets the initial value for the property.

Example

@property --item-size {

  syntax: "<percentage>";

  inherits: true;

  initial-value: 40%;

}

Browser Support

The following table will show you the current browser support for the at-rule @property.

Desktop
85	85	?	71	16.4

Tablets / Mobile
85	x	60	16.4	14	85

Last updated by CSSPortal on: 30th September 2023