Web/CSS/@property

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The @property CSS at-rule is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties, allowing for property type checking, setting default values, and define whether a property can inherit values or not.

The @property rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid @property rules result in a registered custom property, as if CSS.registerProperty had been called with equivalent parameters.

Syntax

@property --propery-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

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.

Examples

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',
});

Formal syntax

{{csssyntax}}

Specifications

Specification	Status	Comment
CSS Properties and Values API Level 1	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`@property` Experimental'	Chrome Full support 85	Edge Full support 85	Firefox No support No	IE No support No	Opera Full support 71	Safari No support No	WebView Android Full support 85	Chrome Android Full support 85	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.