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

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.

<string>

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

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