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 value | n/a (required) |
Computed value | as specified |
Formal syntax
syntax =
<string>
Examples
Add type checking to --my-color
custom property
, using the <color>
syntax:
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