syntax

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:

css

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

syntax = 
<string>

Examples

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

Using CSS @property at-rule:

css

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript CSS.registerProperty:

js

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also