@property

Experimental: This is an experimental technology
Check 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 --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

Descriptors

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.

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

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
@property
85
85
No
No
71
No
85
85
No
60
No
14.0
inherits
85
85
No
No
71
No
85
85
No
60
No
14.0
initial-value
85
85
No
No
71
No
85
85
No
60
No
14.0
syntax
85
85
No
No
71
No
85
85
No
60
No
14.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@property