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

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

syntax

Experimental: This is an experimental technologyCheck 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

Specification
CSS Properties and Values API Level 1 # the-syntax-descriptor

See also

CSS Properties and Values API CSS Painting API CSS Typed Object Model CSS Houdini

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)中文 (简体) Change language