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 valuen/a (required)
Computed valueas 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 Status Comment
CSS Properties and Values API Level 1
The definition of 'syntax' in that specification.
Working Draft Initial definition.

Browser compatibility

BCD tables only load in the browser

See also