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 value | n/a (required) |
Computed value | as specified |
Formal syntax
Examples
Add type checking to --my-color
custom property
, using the <color>
syntax:
@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 |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
Browser compatibility
BCD tables only load in the browser