syntax

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The syntax CSS descriptor is required when using the @property at-rule and describes the allowable syntax for the property.

Syntax

The following are all valid syntax strings:

syntax: '<color>'; /* accepts a color */

syntax: '<length> | <percentage>'; /* accepts lengths or percentages but not calc expressions with a combination of the two */

syntax: 'small | medium | large'; /* accepts one of these values set as custom idents. */

syntax: '*'; /* any valid token */

Values

A string with a supported syntax as defined by the specification. Supported syntaxes are a subset of CSS types. These may be used along, or a number of types can be used in combination.

"<length>"

Any valid <length> values.

"<number>"

Any valid <number> values.

"<percentage>"

Any valid <percentage> values.

"<length-percentage>"

Any valid <length-percentage> values.

"<color>"

Any valid <color> values.

"<image>"

Any valid <image> values.

"<url>"

Any valid url() values.

"<integer>"

Any valid <integer> values.

"<angle>"

Any valid <angle> values.

"<time>"

Any valid <time> values.

"<resolution>"

Any valid <resolution> values.

"<transform-function>"

Any valid <transform-function> values.

"<custom-ident>"

Any valid <custom-ident> values.

"<transform-list>"

A list of valid <transform-function> values.

Formal definition

Related at-rule @property
Initial value n/a (required)
Computed value as specified

Formal syntax

<string>

Examples

Add type checking to --my-color custom property, using the <color> syntax:

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

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
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/syntax