syntax
Quick Summary for syntax (@property)
Check the Browser compatibility table carefully before using this in production.
Code Usage for syntax (@property)
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 */
More Details for syntax (@property)
syntax
Experimental: This is an experimental technologyCheck 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
<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 |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
See also
CSS Properties and Values API CSS Painting API CSS Typed Object Model CSS HoudiniLast modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)中文 (简体) Change language