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.

Any valid <length> values.

Any valid <number> values.

Any valid <percentage> values.

Any valid <length-percentage> values.

Any valid <color> values.

Any valid <image> values.

Any valid url() values.

Any valid <integer> values.

Any valid <angle> values.

Any valid <time> values.

Any valid <resolution> values.

Any valid <transform-function> values.

Any valid <custom-ident> values.

A list of valid <transform-function> values.

Formal definition

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

See also

Last modified: Aug 12, 2021, by MDN contributors